Search results remain open after page change

I have implemented Algolia with react-instantsearch-hooks-web (v.6.30.2) on a Next.js site and have it working. However, when a search result hit is clicked and the user is taken to a new page, the search query and results box remain active.

Is there a standard Algolia way to have the search reset on a page transition? I have pasted my simplified setup below.

(Note: I have searched Google and the docs and couldn’t find anything)

Main search component

import algoliasearch from "algoliasearch/lite";
import {
  InstantSearch,
  SearchBox,
  Hits,
} from "react-instantsearch-hooks-web";
import SearchResult from "./components/SearchResult";
import NoResultsBoundary from "./components/NoResultsBoundary";
import NoResults from "./components/NoResults";

const algoliaClient = algoliasearch("MY_APP_ID", "MY_SEARCH_API_KEY");

const Search = () => {
  return (
    <div>
      <InstantSearch
        searchClient={algoliaClient}
        indexName="myindexname"
      >
        <SearchBox placeholder="Search" />

        <NoResultsBoundary fallback={<NoResults />}>
          <Hits hitComponent={SearchResult} />
        </NoResultsBoundary>
      </InstantSearch>
    </div>
  );
};

export default Search;

Other referenced components:

SearchResult

import { Snippet } from "react-instantsearch-hooks-web";
import Link from "next/link";

const SearchResult = ({ hit }) => {
  const { sectionId, slug, } = hit;
  const searchResultUrl = sectionId ? `${slug}#${sectionId}` : slug;
  return (
    <Link href={searchResultUrl}>
      <a>
        <Snippet attribute="content" {...{ hit }} />
      </a>
    </Link>
  );
};

export default SearchResult;

NoResultsBoundary

import { useInstantSearch } from "react-instantsearch-hooks-web";

const NoResultsBoundary = ({ children, fallback }) => {
  const { indexUiState, results } = useInstantSearch();

  if (!indexUiState.query) {
    return <></>;
  }

  if (!results.__isArtificial && results.nbHits === 0) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
};

export default NoResultsBoundary;

NoResults


const NoResults = () => {
  const { indexUiState } = useInstantSearch();

  return (
    <p>No results for {indexUiState.query}.</p>
  );
};

export default NoResults;