Next.js: Update Navbar component when navigating to new route

Goal: Update Navbar accent when page is navigated to

Current: The Navbar accent has a delayed update. It updates to the last visited page. For example: if I start on page1, then click on page2, the accent remains on page1 until I click on page2 again. If I then click on page3, page2 will now have the accent.

Attempted: I am using next.router in useEffect to try to update the accent on change of router.

Code: app.js

import "tailwindcss/tailwind.css";
import Layout from "../components/Layout";

function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

export default MyApp;

layout.js

import Navbar from "./Navbar";

export default function Layout({ children }) {
    return (
        <div className="layout">
            <Navbar />
            <div className="">{children}</div>
        </div>
    );
}

navbar.js

 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";

 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }

 const navigation = [
   { name: "page1", href: "/", current: true },
   { name: "page2", href: "/page2", current: false },
   { name: "page3", href: "/page3", current: false },
 ];

 export default function Navbar() {
   const router = useRouter();
   useEffect(
     (e) => {
       navigation.map((item) => {
         if (router.route == item.href) {
           item.current = true;
         } else {
           item.current = false;
         }
       });
       console.log(router.route);
     },
     [router]
   );

   return (
     <div>
       <div>
         {navigation.map((item) => (
           <Link href={item.href} key={item.name}>
             <a
               className={classNames(
                 item.current
                   ? "border-indigo-500 text-gray-900"
                   : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
                 "inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
               )}
               aria-current={item.current ? "page" : undefined}
             >
               {item.name}
             </a>
           </Link>
         ))}
       </div>
     </div>
    );
  }

index.js page2 & page3 are similar.

export default function Home() {
    return (
        <div className="flex flex-col items-center justify-center min-h-screen py-2">
            Hello
        </div>
    );
}