While navigating, previous page content stays in DOM, but has "display: none !important;" applied. Is there any way to prevent it? As of now it breaks navigation associated with shadcn/radix-ui components - while navigating from "/" to "/auth" where Sheet is mounted on "/", but not on "/auth" it starts exit animation and fails. After that radix portal with Sheet/Dialog content stays rendered and is not interactive. Same happens when i put Link from next/link within tooltip (as children of <TooltipTrigger asChild>) - tooltip content stays mounted.

minimal reproduction:

assume code of /src/app/page.tsx is:

import Link from "next/link";

import { Button } from "@acme/ui/components/button";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@acme/ui/components/sheet";


export default function Page() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button aria-label="Open navigation" size="icon" variant="outline">
          <Menu />
        </Button>
      </SheetTrigger>

      <SheetContent side="left">
        <SheetHeader>
          <SheetClose asChild>
            <Link className="w-fit" href="/">
              <SheetTitle>placeholder</SheetTitle>
            </Link>
          </SheetClose>

          <SheetDescription>placeholder</SheetDescription>
        </SheetHeader>

        {[{ children: "auth", href: "/auth" }, { children: "some page", href: "/some-page" }].map((entry) => (
          <SheetClose key={entry.href} asChild>
            <Button className="mx-2 justify-start" variant="ghost" asChild>
              <Link {...entry} />
            </Button>
          </SheetClose>
        ))}
      </SheetContent>
    </Sheet>
  );
}

assume code of /src/app/auth/page.tsx is:

export default function Page() {
  return <p>Lorem ipsum</p>;
}