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 (
    <InstantSearch
      searchClient={searchClient}
      indexName="prod_web_content"
    >
      <SearchBox />
      <EmptyQueryBoundary fallback={null}>
        <Hits hitComponent={SearchResult} />
      </EmptyQueryBoundary>
    </InstantSearch>
  );
}

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