Sync Multi index with custom routing

[SalmenBejaoui]

Hi all, the goal that I'm trying to reach is to not trigger product until I click apply button.
Currently, I'm using Algolia routing to customize the URL. I'm trying to achieve this goal (not sure is the correct way to do it) I had the idea to useIndex component to encapsulate my filters (including refinement list and price range).

<InstantSearchSSRProvider {serverState}>
  <InstantSearch
    searchClient={algoliaClient}
    indexName={indexName}
    routing={getRouting(indexName, serverUrl, customerSegment, locale)}
    future={{
      preserveSharedStateOnUnmount: true,
    }}
  >
    <Configure facets={['*']} filters={categoryFilter} hitsPerPage={pageLimit} clickAnalytics={true} />
    <AlgoliaVirtualWidgets />
    <Index indexName={indexName} indexId="drawer">
      <Configure facets={['*']} filters={categoryFilter} hitsPerPage={pageLimit} clickAnalytics={true} />
      <AlgoliaVirtualWidgets />
      <PlpFilterAlgolia searchClient={algoliaClient} setDrawerState={setDrawerState} />
    </Index>
    <ProductGrid />
  </InstantSearch>
</InstantSearchSSRProvider>

I tried different approaches to update my main indexName state using setUiState/setIndexUiState and passing to it the drawer Index state but the main state is resetted every time.

There are other approaches to implement this behavior? Thank you

I'm using the react-instantsearch v7