Search state doesn't persist when opening a modal

[HuyAms]

Hi,

I put my SearchBox inside a modal

I also sync the search state with the URL. So when I visit http:localhost:3000/?query=Algolia I expect the search modal is open and the Search sends a request with query=Algolia and returns a response accordingly.

Everything works just perfectly until I add the queryHook to debounce the search.

Now when I visit http:localhost:3000?query=Algolia, the search modal is open and I can see the search input is pre-filled with "Algolia". However, the search doesn't filter results with the query "Algolia", it instead returns all the results. In fact, I see it sends an empty query to the server.

import {
	InstantSearch,
	SearchBox,
	InfiniteHits,
	InstantSearchSSRProvider,
	Configure,
	type SearchBoxProps,
} from "react-instantsearch-hooks-web";
	
export function Search({ serverState, serverUrl, locale }: SearchProps) {

	// Debounce search
	const queryHook: SearchBoxProps["queryHook"] = debounce((query, search) => {
		spTrackSearchTerm(query);

		search(query);
	}, 500);

	return (
		<InstantSearchSSRProvider {...serverState}>
			<InstantSearch
				searchClient={searchClient}
				indexName={searchIndex}
				insights
				routing={{
					router: history({
						getLocation() {
							if (typeof window === "undefined") {
								return new URL(
									serverUrl
								) as unknown as Location;
							}

							return window.location;
						},
					}),
					stateMapping: singleIndex(searchIndex),
				}}
			>
			
			<SearchBox
						autoFocus={true}
						placeholder="Search"
						
                                                 👉 This queryHook causes issue
						queryHook={queryHook}
					/>
	
			<InfiniteHits
				showPrevious={false}
				hitComponent={Hit}
			/>
			</InstantSearch>
		</InstantSearchSSRProvider>
	);
}

export function SearchDialog() {
  return (<Dialog><Search/></Dialog>)
}

I think it has something to do with the modal mount/unmount. I try to put the queryHook to the parent component which is not subjected to the mount/unmount but it doesn't work.
https://www.algolia.com/doc/guides/building-search-ui/widgets/show-and-hide-widgets/react-hooks/?client=App.jsx#persist-the-state-on-unmount

Update:
Adding query-hook causes the search input to send an initial empty request which overrides the initial state (returned from the server). When removing that hook, it doesn't send any initial request which is expected behavior.

How should I resolve this issue? Thanks