Sheet remains open after I get redirect to another page

[fdm89]

Hello, I am working on my personal portfolio and I am implementing a sidebar menu using shadcn and the Sheet component.
I have an Headere where I have yhe Nav componente that show only for xl device and the MobileNav that show only below xl devices:

<header className={${
header
? "py-4 bg-white-900/100 backdrop-blur-sm shadow-lg dark:bg-accent-900/10 dark:backdrop-blur-sm dark:shadow-lg"
: "py-6 dark:bg-transparent"
} sticky top-0 z-30 transition-all } > <div className="container mx-auto"> <div className="flex justify-between items-center"> <Logo /> <div className="flex items-center gap-x-6"> <Nav containerStyles="hidden xl:flex gap-x-8 items-center" linkStyles="relative hover:text-primary transition-all" underlineStyles="absolute left-0 top-full h-[2px] bg-primary w-full" /> <ThemeToggler /> <div className="xl:hidden"> <MobileNav /> </div> </div> </div> </div> </header>
this is the Nav component that contains the Links to the other pages:

` const links = [
{ path: "/", name: "home" },
{ path: "/projects", name: "my projects" },
{ path: "/contact", name: "contact" },
];

const Nav = ({ containerStyles, linkStyles, underlineStyles }: Props) => {
const pathName = usePathname();

return (
<nav className={${containerStyles}}>
{links.map((link, index) => (
<Link
key={index}
href={link.path}
className={capitalize ${linkStyles}}
>
{link.path === pathName && (
<motion.span
initial={{ y: "-100%" }}
animate={{ y: 0 }}
transition={{ type: "tween" }}
layoutId="underline"
className={${underlineStyles}}
/>
)}
{link.name}

))}

);
};

export default Nav; `
And here the MobileNav where I am using the Sheet component:

`const MobileNav = () => {
return (

);
};

export default MobileNav;`

I put the Nav component in the SheetClose:

But when I click on one of the links I get riderected but the sheet stay open, How do I make it close automatically when I change pages?