Refiriéndose al ejemplo de mención de Slate.js, https://github.com/ianstormtaylor/slate/blob/main/site/examples/mentions.tsx Quiero integrarlo con mi aplicación React. Si bien la integración enfrenta un problema con los ganchos utilizados en el código..

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);

Lo estoy llamando como un componente funcional:

 <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>();