Hi, I'm on v13.4, using App directory. I have a Page component using useSearchParams and also updating query params in it.
I'm also consuming the same hook in a child of the Page component, and a useEffect to update query params as well.
The issue is, searchParams has the old value in the child component when the Page component updates it, then in its useEffect, URL is updated with the old value.

Code:

Page:

              onChange={(i) => {
                setTab(i);
                const params = new URLSearchParams(searchParams);
                const tabName: TabNames = i === 0 ? "bookings" : "enquiries";

                params.set("tab", tabName);
                params.delete("index");
                router.replace(`${pathname}?${params.toString()}`, {
                  scroll: false,
                });
              }}

Child Component UseEffect:

useEffect(() => {
const newParams = new URLSearchParams(searchParams);
      newParams.set("index", "1");
      router.replace(`${pathname}?${newParams.toString()}`, {
        scroll: false,
      });
}, [tab])