In my Next JS app I'm getting array and mapping them for the nav bar. but when i do it throws an error of TypeError: _utils_navigation__WEBPACK_IMPORTED_MODULE_6___default(...).map is not a function. my code is as follows.

{NavRoutes.map((navs, index) => {
            console.log(navs.title);
            console.log('bhsjvhjvs');
            return (
              <Link href={navs.link}>
            <div className={`${
              router.asPath === navs.link 
              ? "text-active-red"
              : ""
            }`}>{navs.title}</div>
          </Link>
            )
          })}

and the array

const NavRoutes = [
    {
      title: "HOME",
      link: "/"
    },
    {
      title: "NEWS",
      link: "/news"
    },
    {
      title: "CHANNEL",
      link: "/channels"
    },
    {
      title:"SHOWS",
      link: "/shows"
    },
    {
      title: "SCHEDULE",
      link: "/schedules"
    },
    {
      title: "CONTACT",
      link: "/contact"
    },
]

export default NavRoutes;

so how can i work through this?