React instant search searchState refinements bug when setting url params

I am using next.js and trying to sync my url with the searchstate.

I have done the following:

set up a router:

const router = useRouter();

          <InstantSearch
            searchClient={searchClient}
            indexName="ingredients"
            onSearchStateChange={(state) =>
              router.push(`/additem?${qs.stringify(state)}`, undefined, {
                shallow: true,
              })
            }
            searchState={router.query}
          >

I can sync my query properly, but every time I click on the RefinementList toggle, nothing happens, but it still adds to my url, is there any workaround around this bug?

Screenshot 2022-04-15 at 16.08.07