How can I use active classes in a map function

Question

I just want to use active classes based on the pathname. when I use it like this activeMenu class shows up on every item. Basically when someone visits like /login page menu icon background should be blue.

Sidebaritem.tsx

  {SidebarItems.map((props) => (
        <div className={styles.sidebar__navitem} key={props.id}>
          <div
            className={styles.sidebar__navlink}
            id={
              router.pathname === "/Manage/Events/create"
                ? `${styles.activeMenu}`
                : ""
            }
          >
            {props.MenuIcon}
            <div className={styles.sidebar__category}>
              <div className={styles.sidebar__categorytext}>{props.title}</div>
            </div>
          </div>
        </div>
      ))}

SidebarItems.tsx

const SidebarItems = [
  {
    id: 1,
    title: "Events",
    link: "/Home",
    MenuIcon: <ScheduleIcon />,
  },
  {
    id: 2,
    title: "Orders",
    link: "#",
    MenuIcon: <OrderIcon />,
  }