How to use the @umijs/hooks.useEventListener function in @umijs/hooks

const dropdownOverlayRef = useRef(null)
  const containerRef = useRef(null)

  const overlay = useMemo(() => {
    return (
      <div>
        {dropdownRender()}
      </div>
    )
  }, [dropdownRender, overlayClassName, handleOverlayMouseDown])

  useEventListener('mousedown', (ev: MouseEvent) =&gt; {
    // Close the dropdown if click outside
    if (!dropdownVisible) {
      return
    }
    const hitElements = [dropdownOverlayRef.current, containerRef.current]
    if (
      hitElements.every(
        (e) =&gt;
          !e ||
          !ev.target ||
          (!e.contains(ev.target as HTMLElement) &amp;&amp; e !== ev.target)
      )
    ) {
      setDropdownVisible(false)
    }
  })

const container = divRef.current
        chart.current = await heatmapChart(
          d3.select(container),
          props.data,
          props.dataTag,
          props.onBrush,
          props.onZoom
        )
        props.onChartInit(chart.current)
        updateChartSize()
      }
    }
    init()
  }, [props, props.data, props.dataTag])

  useEventListener('resize', () => {
    updateChartSize()
  })

  return <div>
}
</div>

const useLoadingBar = () => {
  const loadingBar = useRef()
  useEventListener('single-spa:before-routing-event', () =>
    loadingBar.current.continuousStart()
  )
  useEventListener('single-spa:routing-event', () =>
    loadingBar.current.complete()
  )

  return loadingBar
}

const useLoadingBar = () => {
  const loadingBar = useRef()
  useEventListener('single-spa:before-routing-event', () =>
    loadingBar.current.continuousStart()
  )
  useEventListener('single-spa:routing-event', () =>
    loadingBar.current.complete()
  )

  return loadingBar
}