fix compile

ui/dashboardApp/layout/main/Sider/Banner.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef } from 'react'
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
 import { useSize } from 'ahooks'
 import Flexbox from '@g07cha/flexbox-react'
@@ -45,7 +45,8 @@ export default function ToggleBanner({
   collapsed,
   onToggle,
 }) {
-  const [bannerSize, bannerRef] = useSize<HTMLDivElement>()
+  const bannerRef = useRef(null)
+  const bannerSize = useSize(bannerRef)
   const transBanner = useSpring({
     opacity: collapsed ? 0 : 1,
     height: collapsed ? toggleHeight : bannerSize.height || 0,

ui/lib/apps/Configuration/index.tsx

@@ -95,7 +95,7 @@ export default function () {
 
   const { t } = useTranslation()
   const [filterValueLower, setFilterValueLower] = useState('')
-  const debouncedFilterValue = useDebounce(filterValueLower, 200)
+  const debouncedFilterValue = useDebounce(filterValueLower, { wait: 200 })
 
   const handleSaved = useCallback(() => {
     sendRequest()

ui/lib/apps/KeyViz/components/KeyViz.tsx

@@ -91,11 +91,10 @@ const KeyViz = () => {
   const [getBrightLevel, setBrightLevel] = useGetSet(1)
   const [getMetricType, setMetricType] = useGetSet<DataTag>('written_bytes')
   const [config, setConfig] = useState<ConfigKeyVisualConfig | null>(null)
-  const {
-    state: shouldShowSettings,
-    setTrue: openSettings,
-    setFalse: closeSettings,
-  } = useBoolean(false)
+  const [
+    shouldShowSettings,
+    { setTrue: openSettings, setFalse: closeSettings },
+  ] = useBoolean(false)
   const { t } = useTranslation()
 
   const enabled = config?.auto_collection_disabled !== true

ui/lib/apps/QueryEditor/Editor.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import AceEditor, { IAceEditorProps } from 'react-ace'
 import { useSize } from 'ahooks'
 
@@ -12,7 +12,8 @@ import styles from './Editor.module.less'
 interface IEditorProps extends IAceEditorProps {}
 
 function Editor({ ...props }: IEditorProps, ref: React.Ref<AceEditor>) {
-  const [state, containerRef] = useSize<HTMLDivElement>()
+  const containerRef = useRef(null)
+  const containerSize = useSize(containerRef)
   return (
     <div className={styles.editorContainer} ref={containerRef}>
       <AceEditor
@@ -23,8 +24,8 @@ function Editor({ ...props }: IEditorProps, ref: React.Ref<AceEditor>) {
         showPrintMargin={false}
         showGutter={true}
         highlightActiveLine={true}
-        width={`${state.width}px`}
-        height={`${state.height}px`}
+        width={`${containerSize.width}px`}
+        height={`${containerSize.height}px`}
         ref={ref}
         {...props}
       />

ui/lib/components/AppearAnimate/index.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames'
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useRef } from 'react'
 import { useEventListener } from 'ahooks'
 
 export interface IAppearAnimateProps
@@ -20,10 +20,8 @@ function AppearAnimate({
     setIsFirst(false)
   }, [])
 
-  const ref = useEventListener<HTMLDivElement>(
-    'animationend',
-    handleAnimationEnd
-  )
+  const ref = useRef(null)
+  useEventListener('animationend', handleAnimationEnd, { target: ref })
 
   return (
     <div ref={ref} className={cx(className, { [motionName]: isFirst })}>

ui/lib/components/InstanceSelect/TableWithFilter.tsx

@@ -60,17 +60,18 @@ function TableWithFilter(
 
   // FIXME: We should put Input inside ScrollablePane after https://github.com/microsoft/fluentui/issues/13557 is resolved
 
-  const [containerState, containerRef] = useSize<HTMLDivElement>()
+  const containerRef = useRef(null)
+  const containerSize = useSize(containerRef)
 
   const paneStyle = useMemo(
     () =>
       ({
         position: 'relative',
-        height: containerState.height,
+        height: containerSize.height,
         maxHeight: tableMaxHeight ?? 400,
         width: tableWidth ?? 400,
       } as React.CSSProperties),
-    [containerState.height, tableMaxHeight, tableWidth]
+    [containerSize.height, tableMaxHeight, tableWidth]
   )
 
   return (