Typescript React router 如何处理嵌套路由

我正在try 将嵌套路由添加到应用程序中，但老实说，我不知道如何添加.如何将嵌套路由添加到我的应用程序？

这是我的应用程序:

import { Route, Routes } from 'react-router-dom';
import routes, { RouteModel } from './router/routes';
import CustomRoute from './router/CustomRoute';

const renderRoutes = (routes: RouteModel[]) => {
  return routes.map((route, index) => {
    if (route.SubItems && route.SubItems.length > 0) {
      return (
        <Route
          key={index}
          path={route.Path}
          element={
            <CustomRoute path={route.Path}>
              <route.Page />
              {renderRoutes(route.SubItems)}
            </CustomRoute>
          }
        />
      );
    } else {
      return (
        <Route
          key={index}
          path={route.Path}
          element={
            <CustomRoute path={route.Path}>
              <route.Page />
            </CustomRoute>
          }
        />
      );
    }
  });
};

const App = () => {
  return <Routes>{renderRoutes(routes)}</Routes>;
};

export default App;

我的路由是这样的:

import { ComponentType } from 'react';
import CreateCarPage from '../page/car/create/page';
import HomePage from '../page/home/page';
import LoginPage from '../page/login/page';
import ListCarPage from '../page/car/list/page';

export type RouteModel = {
  Path: string;
  Page: ComponentType<any>;
  Text: string;
  SubItems?: RouteModel[];
};

const routes: RouteModel[] = [
  {
    Path: '*',
    Page: HomePage,
    Text: 'Home',
  },
  {
    Path: '/login',
    Page: LoginPage,
    Text: 'Login',
  },
  {
    Path: '/car',
    Page: ListCarPage,
    Text: 'Car',
    SubItems: [
      {
        Path: '/car/create',
        Text: 'Create',
        Page: CreateCarPage,
      },
    ],
  },
];

export default routes;

和我的定制路由:

import { Navigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import Layout from '../component/layout/Layout';

type Props = {
  children: React.ReactNode;
  path: string;
};

const CustomRoute = ({ children, path }: Props) => {
  const { authenticated } = useAuth();

  if (path === '/login') {
    return authenticated ? <Navigate to="/" /> : children;
  }

  return authenticated ? <Layout>{children}</Layout> : <Navigate to="/login" />;
};

export default CustomRoute;

我得到了这个错误:

未捕获的错误:<Route>只能用作<Routes>元素的子元素，不能直接呈现.请把你的<Route>元装在<Routes>元里