Referring to the Slate.js mention example, https://github.com/ianstormtaylor/slate/blob/main/site/examples/mentions.tsx I want to integrate it with my React app.While integration facing issue with hooks used in the code..

QueryComponent.js

const QueryBoxComponent = () => {
    const ref = useRef<HTMLDivElement | null>()
    const [target, setTarget] = useState<Range | undefined>()
    const [index, setIndex] = useState(0)
    const [search, setSearch] = useState('')
    const renderElement = useCallback(props => <Element {...props} />, [])
    const editor = useMemo(
      () => withMentions(withReact(withHistory(createEditor()))),
   []
   )

   const chars = CHARACTERS.filter((c) =>
    c.toString().toLowerCase().startsWith(search.toLowerCase())
      ).slice(0, 10);

I am calling it as a functional component:

    <div className="stockfilterresult" style={{ marginTop: "10px" }}>
            <QueryBoxComponent />
    </div>

 const ref = useRef<HTMLDivElement | null>();                                             ^
  35 | const [target, setTarget] = useState<Range | undefined>();
  36 |   const [index, setIndex] = useState(0);
  37 |   const [search, setSearch] = useState('');

 BabelLoaderError: SyntaxError: 
   C:/Users/HP/Downloads/StockUI/src/components/QueryBoxComponent.jsx: Unexpected token (34:44)

34 |   const ref = useRef<HTMLDivElement | null>();