children routes, doesn't work React Router with Lazy Loading - reactjs

Question

Guys anyone would know how to help me how to use Child routes with Lazy loading with react-router.
I'm doing it the way below but when I try to access the sub route it doesn't work
-- the route is declared as a array
import { lazy } from 'react'
const routesLIst = [
{
path: '/myPage',
name: 'myPage',
Component: lazy(() => import('src/pages/myPage')),
children: [
{ path: '/test', name: 'test', Component: lazy(() => import('src/components/myPage/test')) },
{ path: '/test2', name: 'test2', Component: lazy(() => import('src/components/myPage/test2')) },
]
}
-in the page I'm trying to acces the data with props.children, but the sub-route doesn't work
{ props.children }
example: I'm trying to access myPage/test , and get the data inside the myPage with props.children
const myPage: FC<> = (props) => {
const { children } = props
return (
<div>
{ children }
</div>
)
}
import {Route, Switch} from 'react-router';
interface Routes {
routes?: any
}
export const Routes: FC<Routes> = (props) => {
const {routes} = props
return (
<>
<Switch>
{routes.map((route) => {
if (!route.children || route.children.length < 1) {
return (
<Route
key={route.path}
exact={route.exact}
path={route.path}
render={props => (<route.Component {...props} name={route.name}/>)}
/>
)
} else {
return (
<Route
key={route.path}
exact={route.exact}
path={route.path}
render={props => (
<route.Component {...props} name={route.name}>
{
route.children.map((subRoute) => (
<Route
key={subRoute.path}
exact={subRoute.exact}
path={subRoute.path}
render={props => (
<subRoute.Component {...props} name={subRoute.name}/>
)}
/>
))
}
</route.Component>
)
}
/>
)
}
}
)}
</Switch>
</>
);
};