Как вывести массив Route в react-router-dom v6?

Всем привет! Раньше использовал react-router-dom v5 и все работало, но нужно было перейти на v6 и все сломалось. В чем может быть причина? Если выводить Router не используя массив, тогда все работает.

//RouterComponent

<Routes>
    {allRoutes.map((route: IRoute) => {
              const path = Array.isArray(route.path)
                ? route.path.filter((item: string) => item === pathname && item)[0]
                : route.path;

              const authorization = (route: IRoute): boolean => {
                if (route.isAuth) return auth;
                if (route.isAdmin) return staff;
                if (route.protectRouteBasket) return basketIsNotEmpty;
                return false;
              };

              const protectedRoutes = route.isAdmin || route.isAuth || route.protectRouteBasket;
   
              return protectedRoutes ? (
                <Route
                  key={route.name}
                  element={
                    <ProtectedRoute authorization={authorization(route)}>
                      {<Route element={route.component} path={path} />}
                    </ProtectedRoute>
                  }
                />
              ) : (
                <Route
                  path={typeof route.path}
                  key={route.name}
                  element={route.component}
                />
              );
            })}
</Routes>

//config

export const allRoutes: IRoute[] = [
  { component: Main, path: "/", name: "main", isAdmin: false, isAuth: false },
  { component: AboutMe, path: "/aboutMe", name: "aboutMe", isAdmin: false, isAuth: false },
...
]

//ProtectedRoute

export const ProtectedRoute: React.FC<PropsProtectedRoute> = ({ authorization, children }) => {
  return authorization ? children : <Navigate to="/" />;
};

//Так работает

<Route path="*" element={<NotFound />} />