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

export const MenuBar: FC = props => {
  const { t } = useTranslate(['content', 'common'])

  const [updateProfileHeight, profileHeight$] = useObservableCallback(
    heightChangeTransform
  )

  const [updateSBHeight, searchBoxHeight$] = useObservableCallback(
    heightChangeTransform
  )

  // update panel min height
  useSubscription(
    useObservable(() =>
      combineLatest(profileHeight$, searchBoxHeight$).pipe(
        // a little delay for organic feeling
        debounceTime(100),
        map(heights => {
          const max = Math.max(...heights)
          return max > 0 ? max + 72 : 0
        })
      )
    ),
    props.onHeightChanged
  )

  return (
    <header>
      </header>

export const useVerticalScroll = () => {
  const [onWheel, onWHeel$] = useObservableCallback(_useVerticalScrollOnWheel)
  useSubscription(onWHeel$)

  const tabsRef = useRef(null)
  useEffect(() => {
    if (tabsRef.current) {
      // take the node out for cleaning up
      const node = tabsRef.current
      node.addEventListener('wheel', onWheel, { passive: false })
      return () => {
        node.removeEventListener('wheel', onWheel)
      }
    }
  }, [tabsRef.current])

  return tabsRef
}
function _useVerticalScrollOnWheel(event$: Observable) {

dicts,
    onHeightChanged,
    touchMode,
    language,
    doubleClickDelay,
    newSelection,
    ...restProps
  } = props

  const heightRef = useRef({ dicts: {}, sum: 0 })

  const [updateHeight, iupdateHeight$] = useObservableCallback(event$ =>
    debounceTime(10)(event$)
  )

  useSubscription(iupdateHeight$, onHeightChanged)

  const onItemHeightChanged = useRef((id: DictID, height: number) => {
    heightRef.current.sum =
      heightRef.current.sum - (heightRef.current.dicts[id] || 0) + height
    heightRef.current.dicts[id] = height
    updateHeight(heightRef.current.sum)
  }).current

  useEffect(() => {
    const oldHeight = heightRef.current
    heightRef.current = dicts.reduce(
      (height, { dictID }) => {
        height.dicts[dictID] = oldHeight.dicts[dictID] || 31
        height.sum += height.dicts[dictID] || 31
        return height
      },

export const CustomInput: React.FC = props => {
  const [onChange, textChange$] = useObservableCallback<
    string,
    React.FormEvent
  >(pluckCurrentTargetValue)

  useSubscription(textChange$, props.onChange)

  return (
    <input value="{props.text}" placeholder="Text input" type="text">
  )
}

export const SaladBowl: FC = props => {
  const [onMouseOverOut, mouseOverOut$] = useObservableCallback<
    boolean,
    React.MouseEvent
  >(hoverWithDelay)

  useSubscription(mouseOverOut$, active => {
    props.onHover(active)
    if (active) {
      props.onActive()
    }
  })

  return (

> = props => {
  const { trans, searchText, langcodes, tl, sl } = props.result
  const { t } = useTranslate(['content', 'langcode'])

  const [isShowLang, setShowLang] = useState(false)
  const [onMouseOverOut, isShowLang$] = useObservableCallback<
    boolean,
    React.MouseEvent
  >(events$ =>
    hover(events$).pipe(debounce(isOver => (isOver ? timer(500) : timer(800))))
  )
  useSubscription(isShowLang$, setShowLang)

  return (
    <div>
      <div>
        
        {searchText.paragraphs.join('').length &lt;= 100 ? (
          
        ) : (
          <div>
            <details>
              <summary>{t('machineTrans.stext')}</summary>
              
            </details>
          </div>
        )}
      </div></div>

)

  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) {
      onTranslateCtx(ctxTransConfig)
    }
  }, [])

  useEffect(getRelatedWords, [word.text, word.context])

  useUpdateEffect(() => {
    setWord({
      ...word,
      trans: genCtxText(word.trans, ctxTransResult)
    })
  }, [ctxTransResult])

force: false
            }
      }),
      distinctUntilChanged((oldVal, newVal) => {
        return (
          !newVal.dbClick &&
          !!oldVal.word &&
          !!newVal.word &&
          oldVal.word.text === newVal.word.text &&
          oldVal.word.context === newVal.word.context
        )
      })
    )
  )

  useSubscription(output$, async result => {
    if (result.word) {
      result.word = await newSelectionWord(result.word)
    }
    newSelection(result as Message<'SELECTION'>['payload'])
  })

  return onMouseUp
}