router.push somehow not working in the code, next js 13

Question

I'm trying to create sidebar content that has a menu along with sub-menus. each of the sub-menus has a route that I will call using router.push.

What confuses me is, router.push on the sub-menu doesn't move me to another page, but if I do console.info(submenuItem.href) I get the route displayed in the console. can anyone help?

my sidebarMenuContent.tsx:

"use client";

import { useRouter, usePathname } from "next/navigation";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import SidebarContent from "./SidebarItems";
import { SidebarMain, SidebarItems, SidebarSub } from "./SidebarItems";

export default function SidebarMenuContent() {
  const router = useRouter();
  const pathname = usePathname();

  return (
    <ul>
      {SidebarContent.map((sidebaritem: SidebarMain, index: number) => (
        <li className="submenu-open" key={index}>
          <h6 className="submenu-hdr">{sidebaritem.menu}</h6>
          <ul>
            {sidebaritem.items.map((item: SidebarItems, index: number) => ( 
              <li
                key={index}
                {/* THIS WORKS */}
                onClick={() => router.push(item.href)}
                className={`sidebar-menu-item ${pathname.includes(item.href) ? "active" : ""}`}
              >
                <div className="sidebar-menu-content">
                  <div className="sidebar-menu-icon-name">
                    {item.icon}
                    <span>{item.name}</span>
                  </div>
                  {item.hasMoreSub && (
                    <ArrowDropDownIcon className="arrow-more-sub"/>
                  )}

                  {/* ======== SUB MENU ========= */}
                    {item.subMenu ? item.subMenu.map((submenuItem: SidebarSub, index: number) => (
                      <div 
                        className={`more-submenu-item ${pathname === submenuItem.href ? "active" : ""}`}
                        {/* THIS DOES NOT WORKS */}
                        onClick={() => { router.push(submenuItem.href); console.info(submenuItem.href) }}
                        key={index}
                      >
                        {submenuItem.icon}
                        <span>{submenuItem.name}</span>
                      </div>
                    )): null}
                </div>
              </li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  );
}

and this where i store my sidebar menu:

export interface SidebarMain {
    menu: string,
    items: SidebarItems[],
}

export interface SidebarItems {
    name: string,
    icon: JSX.Element,
    href: string,
    hasMoreSub: boolean,
    subMenu?: SidebarSub[]
}

export interface SidebarSub {
    name: string,
    icon: JSX.Element,
    href: string,
}


const SidebarContent: SidebarMain[] = 
    [
        {
            "menu": "Main",
            "items": [
                {
                    "name": "Dashboard",
                    "icon": <GridViewIcon sx={{width: '26px', height: '26px'}} />,
                    "href": "/dashboard",
                    "hasMoreSub": false,  
                }
            ]
        },
        //==========================================================================================//
        {
            "menu": "Products",
            "items": [
                {
                    "name": "Manage Users",
                    "icon": <GroupIcon sx={{width: '26px', height: '26px'}} />,
                    "href": "/users",      
                    "hasMoreSub": true, 
                    "subMenu": [
                        {
                            "name": "User List",
                            "icon": <PersonSearchIcon sx={{width: '26px', height: '26px'}} />,
                            "href": "/users"
                        },
                        {
                            "name": "New User",
                            "icon": <PersonAddIcon sx={{width: '26px', height: '26px'}} />,
                            "href": "/users/add-user"
                        },
                    ]   
                },
            ],
        },
        //=========================================================================================//
    ]

    export default SidebarContent;

I'm sorry if this looks hella confusing, any help would be much appreciated