'React router v6 routes with Fallback

How to implement routes with fallback in the react router v6. I got this error:

Uncaught Error: [RouteWithFallbackBoundary] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

const RouteWithFallbackBoundary = (props: PathRouteProps) => (
    <Route {...props}>
        <MyErrorBoundary key={props.path}>
            <Suspense fallback={"loading"}>{props.children}</Suspense>
        </MyErrorBoundary >
    </Route>
);
const MY_ROUTES = {
    test: {
        path: '/test',
        component: lazy(() => import('../Component/Test')),
    }
}
  <Routes>
            <RouteWithFallbackBoundary path={MY_ROUTES.test.path}>
                <MY_ROUTES.test.component />
            </RouteWithFallbackBoundary>
  </Routes>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source