Code from documentation gives "Can't perform a React state update on an unmounted component." error

This is for a Search page implemented on a statically rendered page in a NextJS application.

Following the guidance found in the docs here: Conditional display in React InstantSearch Hooks | Algolia, I am attempting to implement an error boundary:

function EmptyQueryBoundary({ children, fallback }) {
  const { indexUiState } = useInstantSearch();

  if (!indexUiState.query) {
    return fallback;

  return children;

function Search(){
  return (
      <SearchBox />
      <EmptyQueryBoundary fallback={null}>
        <Hits hitComponent={SearchResult} />

When a term is searched, and then deleted from the search box, the following error is logged to the console:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

The same happens when trying to implement a boundary for no results