Hello, I've encountered a strange problem. I have a login modal which appears in front of the browse page. When it opens and overlays, all the content rendered based on the presence of searchParams using useSearchParams function in a client component disappears. It doesn't look very good for the user...

Is there a walkaround other than reading searchParams in the server top component? I don't want to make the route dynamic.

I made a tiny repo to show my problem: https://github.com/szymonhernik/intercepted-small-repo-client but you can see on the screenshots that the div with a purple background disappears when opening modal.

"use client";

import { useSearchParams } from "next/navigation";

export default function ClientComponent() {
  const searchParams = useSearchParams();
  const view = searchParams.get("view");

  if (view === "list") {
    return (
      <div className="mt-16 bg-purple-200 p-4">
        <h1 className="italic">
          (client component reading search params using{" "}
          <code>useSearchParams ()</code>)
        </h1>

        <div>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ul>
        </div>
      </div>
    );
  } else return null;
}