I want to manage all routes of my react app in one place. I need these routes to be added to router and to navigation bar.

Router:

const routes = [
    {
      path: "/",
      element: <Root />,
      errorElement: <NotFound />,
      children: [
        {
          path: "/",
          element: <About />,
        },
        {
          path: "/photos",
          element: <Photos />,
        },
      ],
    },
  ];

const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Navigation bar:

const NavBar = () => {

  return (
    <>
        <Grid container spacing={2}>
          {routes.map((route, index) => (
            <Grid item key={index} xs={6} md={3}>
              <ListItem>
                <ListItemButton >
                  <ListItemText
                    
                  />
                </ListItemButton>
              </ListItem>
            </Grid>
          ))}
        </Grid>
    </>
  );
};

When I am exporting routes and trying to manipulate them in Navabar component it raise this error: pages_Root__WEBPACK_IMPORTED_MODULE_2_.default.map is not a function