@algolia/cache-common not working along with React InstantSearch + Next.js

I am trying to integrate query request caching into my Nest.js application by referencing: https://www.algolia.com/doc/api-client/getting-started/customize/javascript/?client=javascript#caching-requests-and-responses.

I set a search client with the Algoliasearch package with my Aloglia app ID and search API key. And also supply a response cache params for it. Then, provide it to React InstantSearch for use:

const searchClient =  algoliasearch( appId, apiKey,
  {
    responsesCache: createFallbackableCache({
      caches: [
        createBrowserLocalStorageCache({
          key: `algolia-responses-${process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? ''}-${1}`,
          timeToLive: 30,
        }),
        createInMemoryCache(),
      ],
    }),
  })

//in a page.tsx
<InstantSearch searchClient={searchClient} 
      routing={{
            router: createInstantSearchRouterNext({ singletonRouter }),
            stateMapping: getStateMapping(), // storing the steateToRoute and routeToState object
}} />

After setting it, it makes a cache response to a browser localStorage within the timeToLive duration. However, when I type in a URL with facet params that worked before (mapping the route to state), the route to state does not work. It will remove all the facet params, e.g. I have a url with facet param,?onsale=20%3A100. After going to the page, the param will be removed if it is within a cache duration (a prefetch is fine).

Is there any way to fix it? Thanks.

packages version:

    "next": "13.5.4",
    "algoliasearch": "^4.20.0",
    "react-instantsearch": "^7.3.0",
    "react-instantsearch-hooks-router-nextjs": "^6.47.3",
    "react-instantsearch-hooks-web": "^6.47.3",

    "@algolia/cache-browser-local-storage": "^4.23.3",
    "@algolia/cache-common": "^4.23.3",
    "@algolia/cache-in-memory": "^4.23.3",

algolia / algoliasearch-client-javascript

@algolia/cache-common not working along with React InstantSearch + Next.js #1526