I have a page which shows a list of items. These items are paginated, and can be searched, filtered, and ordered.

IndexComponent
-> SidebarComponent
   -> FilterComponentA
   -> OrderComponentB
-> ListContainerComponent
   -> SearchComponent
   -> PaginatedListComponent

There are several components here which have state related to the list which I want in the URL for page reload/URL sharing etc. The problem is that if we use react-router's useSearchParams() hook over multiple components they all end up with different versions of the searchParams and end up overriding each other due to immutability.

What is the best way to handle this situation so that we have minimal re-renders or state changes, without having to hardcode in the child state into the parent components (SidebarComponent shouldn't need to know if we add an extra filter option)?