I have a SSR page where I placed a search bar.

this is my search client component submit handler
const handleSearchSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const paramsTitle = "search";
const currentUrlParams = new URLSearchParams(searchParams);

if (inputValue !== search) {
setLoading({ search: true });
}

if (inputValue) {
currentUrlParams.set(paramsTitle, inputValue);
} else {
currentUrlParams.delete(paramsTitle);
}
replace(${pathname}?${currentUrlParams.toString()});
};

in the client component everything seems to work fine. If i search for something its passed to url if i delete it its deleted from url.

In SSR component i have a conditional render it shows search component if there is a search and if there is no search it shows another part. The problem is If i search for something and then reload the page (with search query in url) then delete the search input. In SSR it shows initial value (after reloading the page).
for example
1) search http://localhost:3001/blog?search=art
2) reload the page
3) delete art from search and submit (there can be any number of searches before deleting and it all works good in the client and SSR)
4) no matter how many searches were after the reload. After the deletion the initial value (after reload) is shown in SSR component, client component sees the correct values.

After reload if i keep changing the search value, the SSR component sees the change. As soon as i delete it it shows the initial value.

My workaround to this is

currentUrlParams.delete(paramsTitle);
currentUrlParams.set("", "");

I delete the search params and set empty params. Then i can see this in url and SSR component can see the change as well.
http://localhost:3001/blog?=

Did somebody else came accross this issue? What would be the best way to solve it ?
Thank you!