How Can I Make the Active Sidebar Item Match the Current URL in Next.js?

I’m working on a Next.js project and I’m trying to make the active sidebar item match the current URL. I tried using the useRouter hooks in a functional component. Despite my efforts, the active item does not seem to update correctly based on the URL.

"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import "@/app/globals.css";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import {
  Package,
  SquareArrowUpRight,
  HandCoins,
  Users,
  ScanEye,
  LayoutDashboard,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function Sidebar() {
  const [activeItem, setActiveItem] = useState(0);
  const handleItemClick = (index) => setActiveItem(index);
  const allItemClass =
    "flex items-center gap-3 rounded-lg px-3 py-2 transition-all";
  const activeItemClass =
    "bg-primary text-white dark:bg-primary dark:text-black";
  const inactiveItemClass = "text-muted-foreground hover:text-primary";
  const { setTheme } = useTheme();

  // Ensure theme is set on the client side
  useEffect(() => {
    setTheme("system");
  }, [setTheme]);

  return (
    <div className="flex min-h-screen w-1/4">
      <div className="hidden border-r bg-muted/40 md:block">
        <div className="flex h-full max-h-screen flex-col gap-2">
          <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
            <Link
              href="/dashboard"
              className="flex items-center gap-2 font-semibold"
            >
              <ScanEye className="h-6 w-6" />
              <span className="">Reebews</span>
            </Link>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="outline"
                  size="icon"
                  className="ml-auto w-8 h-8"
                >
                  <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                  <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                  <span className="sr-only">Toggle theme</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setTheme("light")}>
                  Light
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme("dark")}>
                  Dark
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme("system")}>
                  System
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          <div className="flex-1">
            <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
              <Link
                href="/dashboard"
                className={`${allItemClass} ${
                  activeItem === 0 ? activeItemClass : inactiveItemClass
                }`}
                onClick={() => handleItemClick(0)}
              >
                <LayoutDashboard className="h-4 w-4" />
                Dashboard
              </Link>
              <Link
                href="/campaigns"
                className={`${allItemClass} ${
                  activeItem === 1 ? activeItemClass : inactiveItemClass
                }`}
                onClick={() => handleItemClick(1)}
              >
                <SquareArrowUpRight className="h-4 w-4" />
                Campaign Manager
              </Link>
              <Link
                href="/products"
                className={`${allItemClass} ${
                  activeItem === 2 ? activeItemClass : inactiveItemClass
                }`}
                onClick={() => handleItemClick(2)}
              >
                <Package className="h-4 w-4" />
                Products{" "}
              </Link>
              <Link
                href="/rewards-center"
                className={`${allItemClass} ${
                  activeItem === 3 ? activeItemClass : inactiveItemClass
                }`}
                onClick={() => handleItemClick(3)}
              >
                <HandCoins className="h-4 w-4" />
                Rewards Center
              </Link>
              <Link
                href="/customer-list"
                className={`${allItemClass} ${
                  activeItem === 4 ? activeItemClass : inactiveItemClass
                }`}
                onClick={() => handleItemClick(4)}
              >
                <Users className="h-4 w-4" />
                Customer List
              </Link>
            </nav>
          </div>
          <div className="mt-auto p-4">
            <Card x-chunk="dashboard-02-chunk-0">
              <CardHeader className="p-2 pt-0 md:p-4">
                <CardTitle>Upgrade to Pro</CardTitle>
                <CardDescription>
                  Unlock all features and get unlimited access to our support
                  team.
                </CardDescription>
              </CardHeader>
              <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
                <Button size="sm" className="w-full">
                  Upgrade
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}

How can I make the active sidebar item match the current URL so that the active item updates correctly based on the URL?