I have a problem with parallel routes not clearing previous {children}, when navigating away from /dashboard/profile/edit or /dashboard/profile/change-password pages.

Those paths are done in the way that it takes advantage of Route Intercepting, so if you navigate to them from somewhere in the page, you get them as Modals, but when directly accessing, you get form as a page.

The problem is, that when use navigates away from either of those pages, that page content still stays at the page. I don't know what could be causing that, but I was able to figure out, that content comes from my /dashboard/layout.tsx file {children} parameter.

// /dashboard/layout.tsx
export const dynamic = "force-dynamic";

export default async function DashboardLayout({
  children,
  modal,
  admin,
  contractor,
  customer,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
  admin?: boolean;
  contractor?: boolean;
  customer?: boolean;
}) {
  const { user } = await validateRequest();

  // If no user, redirect to login
  if (!user) {
    return redirect("/login");
  }

  return (
    <div className="grid h-full w-full grid-rows-[auto,1fr]">
      <Navbar />
      <main className="flex h-full flex-col overflow-y-auto pt-4">
        <div className="flex flex-grow pb-8">
          <MaxWidthWrapper className="space-y-4">
            <Suspense fallback={<LoadingSVG size={64} />}>
              <If condition={user.role === "admin"}>{admin}</If>
              <If condition={user.role === "contractor"}>{contractor}</If>
              <If condition={user.role === "customer"}>{customer}</If>
              {children}
            </Suspense>
          </MaxWidthWrapper>
        </div>
        <FooterInfo />
      </main>
      <Suspense fallback={<LoadingSVG size={64} />}>{modal}</Suspense>
    </div>
  );
}

What might be causing this odd behavior?