Navbar Autocomplete SearchBox Example with React Hooks

Hi there,
I am trying to build a React/Next.js web application with a global search box in the nav bar. This search box is an autocomplete component, and when submitted it forwards to the search page. I managed to setup up the routing and the url syncing for the query. However, since the Autocomplete component and the search page itself are separately wrapped in an InstantSearch, it seems the query from the autocomplete box does not update the state of the search page. Is there an example of this problem (or similar)? Or do you have an idea how to fix this?

Thanks for the help!