InstantSearch in controlled mode with custom input element causes maximum update depth error

Question

With React InstantSearch, I am trying to a) use a custom search box and b) access the searchState (to determine if the user is searching or not).

This code causes Maximum update depth exceeded when something is typed in the searchbox. As shown in the comment, replacing CustomSearch with the default Searchbox fixes the problem.

Codesandbox: https://codesandbox.io/s/algolia-react-forked-rwz22?file=/src/Search.js:253-886

const CustomSearch = () => {
  const Component = connectSearchBox(({ currentRefinement, refine }) => (
    <input
      type="search"
      style={{ border: "1px solid black" }}
      value={currentRefinement}
      onChange={(e) => refine(e.currentTarget.value)}
    />
  ));

  return <Component />;
};

function Search() {
  const [searchState, setSearchState] = React.useState({});

  return (
    <InstantSearch
      onSearchStateChange={setSearchState}
      searchState={searchState}
      searchClient={searchClient}
      indexName="movies"
    >
      <CustomSearch /> {/* <SearchBox/> works*/}
    </InstantSearch>
  );
}

Here are the connectSearchBox docs andhere is a small description about InstantSearch in controlled mode.