URL Sync with Gatsby site reach-router

I’ve been trying to follow the documentation for setting up URL Sync on my Gatsby site with react-instantsearch-dom v6.10.2, but not having much luck.

I realize I can’t use the example provided in the docs as-is because Gatsby’s reach-router doesn’t use history.pushState. But even commenting that part out and trying to console log something in the setDebouncedSetState function results in an infinite rerender.

Anyone have any experience with this or suggestions on how to move forward?

My component is below:

import React, { useState } from "react";
import PropTypes from "prop-types";
import Helmet from "react-helmet";
import qs from "qs";
import algoliasearch from "algoliasearch/lite";
import { InstantSearch, Configure } from "react-instantsearch-dom";
import { SEO, SearchTopper, SearchResults } from "components";

const createURL = state => `?${qs.stringify(state)}`;

const searchStateToUrl = searchState =>
  searchState ? createURL(searchState) : "";

const urlToSearchState = ({ search }) => qs.parse(search.slice(1));

const DEBOUNCE_TIME = 400;

const Search = ({ location: { pathname } }) => {
  const [searchState, setSearchState] = useState(urlToSearchState(location));
  const [debouncedSetState, setDebouncedSetState] = useState(null);

  const searchClient = algoliasearch(
    process.env.GATSBY_ALGOLIA_APP_ID,
    process.env.GATSBY_ALGOLIA_SEARCH_KEY
  );
  const indexName = process.env.GATSBY_ALGOLIA_INDEX;

  const onSearchStateChange = updatedSearchState => {
    clearTimeout(debouncedSetState);

    setDebouncedSetState(
      setTimeout(() => {
        console.log("function that updates the route to go here");
        console.log(searchStateToUrl(updatedSearchState));
        // history.pushState(
        //   updatedSearchState,
        //   null,
        //   searchStateToUrl(updatedSearchState)
        // );
      }, DEBOUNCE_TIME)
    );

    setSearchState(updatedSearchState);
  };

  return (
    <div>
      <Helmet
        bodyAttributes={{
          class: "has-animation"
        }}
      />
      <SEO title="Search" pathname={pathname} />
      <InstantSearch
        searchClient={searchClient}
        indexName={indexName}
        searchState={searchState}
        onSearchStateChange={onSearchStateChange}
        createURL={createURL}
      >
        <Configure hitsPerPage={12} facetingAfterDistinct={true} distinct />
        <SearchTopper />
        <SearchResults />
      </InstantSearch>
    </div>
  );
};

Search.propTypes = {
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired
  }).isRequired
};

export default Search;