I have those navlinks that i fetch and render to my navbar const navLinks = [ { name: "Home", path: "/page" }, { name: "About", path: "#about" }, { name: "Services", path: "#services" }, { name: "Team", path: "#team" }, { name: "Contact", path: "#contact" }, ]; export default navLinks;

but when i go to schedule/page.tsx page my navbar links doesnt work to go back to page.tsx. This is my <ul> in navbar <ul className="hidden lg:flex flex-col uppercase p-4 md:p-0 md:flex-row md:space-x-8 text-xl text-white"> {navLinks.map((link) => { const isActive = activeMenuLink === link.path.replace(/.*\#/, ""); const linkClassName = isActive ? "text-[#bf9456]" : "text-white"; return ( <li key={link.name}> <Link className={block py-2 ${linkClassName} ${
link.path === activeMenuLink ? "active" : ""
}} href={link.path} onClick={handleScroll} > {link.name} </Link> </li> ); })} </ul> How i can fix it?