score:1

Accepted answer
function Catalog({ query }) {
  const [results, setResults] = useState(null);

  useEffect(() => {
    // If `fuse.search` is asynchronous then you might need to debounce
    // these queries and/or cancel old queries. If a user types "foo",
    // a query is kicked off, and then they finish typing "food", you
    // want to cancel the query for "foo" because the results will no
    // longer be relevant.
    const results = fuse.search(query);
    setResults(results);
  }, [query])

  return (
    <div />
  );
}

function Search({ query, setQuery }) {
  return (
    <input onChange={setQuery} value={query} /> 
  )
}

function App() {
  const [query, setQuery] = useState("");

  return (
    <>
      <Search query={query} setQuery={setQuery} />
      <Catalog query={query} />
    </>
  );
}

Related Query

More Query from same tag