I have a login modal that I've created using an Intercepting Parallel Route.
It works for the most part, however the part that doesn't work is when I use the router to go to the /dashboard route.
The following is the code I use to go to that route:

const onSubmit: SubmitHandler<TLoginForm> = async (data) => {
    try {
      const signinResponse = await signIn("credentials", {
        email: data.username_email,
        password: data.password,
        redirect: false,
      })

      if(signinResponse && !signinResponse.error) {
        router.replace("/dashboard")
      }
      else {
        console.error("Error :", signinResponse)
        form.setError('root.credentialError', { type:'validate', message: 'Your credentials are incorrect!' })
      }
    } catch (e) {
      if (typeof e === "string") {
        console.error(e.toUpperCase())
      } else if (e instanceof Error) {
        console.error(e.message)
      }
    }
  }

What happens is that the contents of /dashboard is successfully rendered, however the login modal is still present.

The directory structure is as shown in the picture and the modal code is as follows:

"use client";
import { useCallback } from "react";
import { useRouter } from "next/navigation";
import {
  Dialog,
} from "@/components/ui/dialog"


const NativeModal = ({ children }: { children: React.ReactNode }) => {
  const router = useRouter();

  const onDismiss = useCallback(() => {
    router.back();
  }, [router]);

  return (
    <Dialog defaultOpen onOpenChange={onDismiss}>
      {children}
    </Dialog>

  );
};

export default NativeModal;