React InstantSearch Hooks - virtual widget for pagination?

I have followed the docs to implement InstantSearch via React InstantSearch Hooks in my next.js application.

I have implemented InfiniteHits per InfiniteHits | React InstantSearch Hooks | Algolia (and also tried the Pagination component too).

I am getting a console error:

The UI state for the index “XXXXXXXX” is not consistent with the widgets mounted.

This can happen when the UI state is specified via initialUiState, routing or setUiState but that the widgets responsible for this state were not added. This results in those query parameters not being sent to the API.

To fully reflect the state, some widgets need to be added to the index “prod_web_content”:

  • page needs one of these widgets: “pagination”, “infiniteHits”

If you do not wish to display widgets but still want to support their search parameters, you can mount “virtual widgets” that don’t render anything:

const virtualPagination = connectPagination(() => null);

search.addWidgets([
  virtualPagination({ /* ... */ })
]);

If you’re using custom widgets that do set these query parameters, we recommend using connectors instead.

I am using initialUiState for routing - to be able to pass a term to the Search page to have the results pre-filtered to match the search term:


  // https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react-hooks/#rewriting-urls-manually
  const routing = {
    router: history(),
    stateMapping: {
      stateToRoute(uiState) {
        const indexUiState = uiState[indexName];
        return {
          term: indexUiState.query,
          type: indexUiState.refinementList?.searchTags,
          page: indexUiState.page,
        };
      },
      routeToState(routeState) {
        return {
          [indexName]: {
            query: routeState.term,
            refinementList: {
              searchTags: routeState.type,
            },
            page: routeState.page,
          },
        };
      },
    },
  };

...

<InstantSearch
      searchClient={searchClient}
      indexName="XXXXXXX"
      routing={routing}
    >
...

I’m looking for documentation around creating a virtualWidget for the pagination in the context of React InstantSearch Hooks, but can’t (or don’t understand what I’m reading). The example in the console seems to be for implementations leveraging InstantSearch.js

Has anyone encountered this issue?

Many thanks for any insight or assistance