Navbar items with diferent color on page change (NextJS)

navbar.jsx

//NextJS-Twin.Macro Navbar

"use client";
/* import { useRouter } from "next/router"; */
import { usePathname } from "next/navigation";
import tw, { styled, css } from "twin.macro";
import Link from "next/link";
import LogoCapres from "/public/images/capres.jpg";
import Image from "next/image";
import { Button } from "@/components/atoms/StyledButton";

const NavbarContainer = tw.nav`absolute z-30 flex  items-center justify-between bg-transparent w-full text-gray-400  py-2 px-10`;
const NavbarLogo = tw.div`w-24`;
const NavbarLinks = tw.ul`flex`;
const NavbarLink = tw.li`mx-4 font-medium hover:text-gray-600`;
const NavbarButton = tw.button`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`;

//Navbar Items
const NavLinks = [
  { name: "Inicio", href: "/" },
  { name: "Nosotros", href: "/nosotros" },
  { name: "Asociados", href: "/asociados" },
  { name: "Delegados", href: "/delegados" },
  { name: "Servicios", href: "/servicios" },
  { name: "Descargas", href: "/descargas" },
  { name: "Contacto", href: "/contacto" }
];
const Navbar = () => {
  const pathname = usePathname();
  return (
    <NavbarContainer>
      <Link href="/" as={"image"}>
        <NavbarLogo>
          <Image src={LogoCapres} alt={"Logo Capres"} priority={true} />
        </NavbarLogo>
      </Link>
      <NavbarLinks
        css={
          /** Change items color if not in "/" **/          
          pathname === "/"
            ? [tw`text-blue-100 transition-all duration-300`]
            : [tw`text-neutral-500 transition-all duration-300`]
        }
      >
        {NavLinks.map((NavLink, i) => (
          <NavbarLink key={i}>
            <Link href={NavLink.href}>{NavLink.name}</Link>
          </NavbarLink>
        ))}
      </NavbarLinks>

      {/* <NavbarLinks>
        {NavLinks.map((NavLink, i) => (
          <NavbarLink key={i}>
            <Link href={NavLink.href}>{NavLink.name}</Link>
          </NavbarLink>
        ))}
      </NavbarLinks> */}
      <Button tw="rounded-md">
        <Link href="/register" alt={"Registrarse"}>
          Registro
        </Link>
      </Button>
    </NavbarContainer>
  );
};

export default Navbar;