How to use the observable-hooks.useObservableState function in observable-hooks

export const Suggests: React.FC = props => {
  const fetchFunc$ = useObservable(pluckFirst, [props.fetchFunc])
  return useObservableState(
    // A stream of React elements! I know it's mind-blowing.
    useObservable(
      inputs$ =>
        inputs$.pipe(
          filter(([text]) => text.length > 1),
          distinctUntilChanged(),
          switchMap(([text]) =>
            // delay in sub-stream so that users can see the
            // searching state quickly. But no actual request
            // is performed until the delay is hit.
            forkJoin(
              // minimum 1s delay to prevent flickering if user got really greate network condition
              timer(1000),
              timer(750).pipe(
                tap(() => console.log('>>> really start searching...')),
                withLatestFrom(fetchFunc$),

export const SearchBox: FC = props => {
  // Textarea also shares the text so only replace here
  const text = props.text.replace(/\s+/g, ' ')

  const [onSearchBoxFocusBlur, searchBoxFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onSuggestFocusBlur, suggestFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onShowSugget, onShowSugget$] = useObservableCallback(identity)

  const isShowSuggest = useObservableState(
    useObservable(
      inputs$ =>
        combineLatest(
          inputs$,
          merge(
            // only show suggest when start typing
            searchBoxFocusBlur$.pipe(filter(isFocus => !isFocus)),
            suggestFocusBlur$,
            onShowSugget$
          )
        ).pipe(
          map(([[enableSuggest, text], shouldShowSuggest]) =>
            Boolean(enableSuggest && text && shouldShowSuggest)
          ),
          distinctUntilChanged()
        ),

export const MtaBox: FC = props => {
  const isTypedRef = useRef(false)
  const textareaRef = useRef(null)
  const [height, setHeight] = useState(0)

  const [isTyping, onKeyDown] = useObservableState(transformTyping, false)

  const firstExpandRef = useRef(true)
  useEffect(() => {
    if (props.expand) {
      if (!firstExpandRef.current || props.shouldFocus) {
        if (textareaRef.current) {
          textareaRef.current.focus()
          textareaRef.current.select()
        }
      }
      firstExpandRef.current = false
    }
  }, [props.expand])

  useEffect(() => {
    // could be from clipboard with delay

return of([])
        }

        return getWordsByText('notebook', word.text)
          .then(date => {
            console.log(date, 'z>>')
            return date
          })
          .then(words => words.filter(({ date }) => date !== word.date))
          .catch(() => [])
      }),
      startWith([])
    )
  )

  const relatedWords = useObservableState(relatedWords$)!

  const [onTranslateCtx, translateCtx$] = useObservableCallback<
    CtxTranslateResults,
    typeof ctxTransConfig
  >(event$ =>
    event$.pipe(
      withLatestFrom(word$),
      switchMap(([ctxTransConfig, word]) => {
        return translateCtxs(word.context || word.text, ctxTransConfig)
      })
    )
  )
  useSubscription(translateCtx$, setCtxTransResult)

  useEffect(() => {
    if (props.wordEditor.translateCtx) {

searchBoxFocusBlur$.pipe(filter(isFocus => !isFocus)),
            suggestFocusBlur$,
            onShowSugget$
          )
        ).pipe(
          map(([[enableSuggest, text], shouldShowSuggest]) =>
            Boolean(enableSuggest && text && shouldShowSuggest)
          ),
          distinctUntilChanged()
        ),
      [props.enableSuggest, props.text] as [boolean, string]
    ),
    false
  )

  const isExpand = useObservableState(searchBoxFocusBlur$)

  const hasTypedRef = useRef(false)

  const inputRef = useRef(null)
  const suggestRef = useRef(null)

  const focusInput = useRef(() => {
    if (inputRef.current) {
      inputRef.current.focus()
      inputRef.current.select()
    }
  }).current

  const searchText = (text: unknown) => {
    hasTypedRef.current = false
    onShowSugget(false)

(props: SuggestProps, ref: React.Ref) => {
    return useObservableState(
      useObservable(
        inputs$ =>
          inputs$.pipe(
            map(([text]) => text),
            filter(Boolean),
            distinctUntilChanged(),
            debounceTime(750),
            switchMap(text =>
              from(
                message
                  .send<'GET_SUGGESTS'>({
                    type: 'GET_SUGGESTS',
                    payload: text
                  })
                  .catch(() => [] as readonly SuggestItem[])
              ).pipe(

boolean,
    React.MouseEvent<element>
  &gt;(hoverWithDelay)

  const [onMouseOverOut, mouseOverOut$] = useObservableCallback&lt;
    boolean,
    React.MouseEvent<element>
  &gt;(hover)

  const [onFocusBlur, focusBlur$] = useObservableCallback(focusBlur)

  const [showHideProfiles, showHideProfiles$] = useObservableCallback(
    identity
  )

  const isShowProfiles = useObservableState(
    useObservable(() =&gt;
      merge(mouseOverOut$, mouseOverOutDelay$, focusBlur$, showHideProfiles$)
    ).pipe(debounceTime(100)),
    false
  )

  const listItem = props.profiles.map(p =&gt; {
    return {
      key: p.id,
      content: (
        <span>
          {getProfileName(p.name, props.t)}</span></element></element>

export const InputTimeAgo: React.FC = props => {
  const [text, diff] = useObservableState(
    useObservable(
      inputs$ =>
        inputs$.pipe(
          switchMap(([text]) =>
            interval(1000).pipe(
              startWith(-1),
              map(count => [text, fromNow(count + 1)] as [string, string])
            )
          )
        ),
      [props.text]
    )
  )!

  return (
    <div></div>