React router dom 6.22 multiple level nested children routes index page not rendering

I have multiple nested routes in, however the index route component that is 2 levels deep is not rendering and just showing a blank page.

// I cannot add an `index` property because you can't have child routes if it is an index route.


export const routes= [
  { 
    // Put a navigate element since index routes cannot have children. 
    // If this navigate is removed, it cannot reroute using index.
    element: () => <Navigate to={`one`} />,
    path: '/',
    name: 'default',
    children: [
      {
        // Once it is navigated to here from the default `/` route, it just renders a blank page and not the component `NestedComponentOne`
        element: NestedComponentOne,
        path: 'one',
        name: 'One',
        children: [
          {
            element: DeeplyNestedComponentOne,
            name: 'Deep One',
            path: 'deep-one',
          },
          {
            element: DeeplyNestedComponentTwo,
            name: 'Deep Two',
            path: 'deep-two',
          },
        ]
      },
    ]
  }
]


const MyComponent= () => {
  return (
    <>
      <div style={{ margin: "0px 0px" }}>
        <Routes>
          {routes.map((route, idx) => {
            if (route.children && route.children.length > 0) {
              return (
                <Route
                  key={`child-routes-auth-${idx}`}
                  element={route?.element && <route.element />}
                  errorElement={route?.errorElement}
                  name={route.name}
                  path={route.path}
                >
                  {route.children.map((childRoute, childIdx) => {
                    if (childRoute.children && childRoute.children.length > 0) {
                      return (
                        <Route
                          key={`inner-child-auth-routes-${childIdx}`}
                          element={childRoute?.element && <childRoute.element />}
                          errorElement={childRoute?.errorElement}
                          name={childRoute.name}
                          path={childRoute.path}
                        >
                          {childRoute.children.map((innerRoutes, innerIndex) => {
                            return (
                              innerRoutes.element && (
                                <Route
                                  key={`nested-inner-auth-${innerIndex}`}
                                  element={innerRoutes?.element && <innerRoutes.element />}
                                  errorElement={innerRoutes?.errorElement}
                                  index={innerRoutes?.index}
                                  name={innerRoutes.name}
                                  path={innerRoutes.path}
                                />
                              )
                            )
                          })}
                        </Route>
                      )
                    }
                    return (
                      childRoute.element && (
                        <Route
                          key={`childIdx-auth-${childIdx}`}
                          element={childRoute?.element && <childRoute.element />}
                          errorElement={childRoute?.errorElement}
                          index={childRoute?.index}
                          name={childRoute.name}
                          path={childRoute.path}
                        />
                      )
                    )
                  })}
                </Route>
              )
            }
            return (
              route.element && (
                <Route
                  key={`top-routes-${idx}`}
                  element={<route.element />}
                  errorElement={route?.errorElement}
                  index={route?.index}
                  path={route.path}
                  name={route.name}
                />
              )
            )
          })}
        </Routes>
      </div>
    </>
  );
}