Problem with redirection and nested routes

Hi, I'm newbie with react, I've been using it for a short time, and I have a problem with an App that I'm trying to make..

I have a HomePage where I have:

return (
<div className="app">
<Header/>
<AsideNav/>
<Content>
<Outlet />
</Content>
<AsideLateral/>
<Footer />
</div>
)

I want, if it is possible, all my content render in Component.

The App has a login page, when I Login my app get permissions and render the Links to my autorizated pages, ok this works for me and render in Content component.

But when I type the route manually, I get inside...

I have the route this way:

`
{/*Ruta pública de acceso */}
}/>

    {/*Rutas protegidas */}
    <Route
      path='/'
      element={
        // <ProtectedRouteWrapper>
          <HomePage />
        // </ProtectedRouteWrapper>
      }
    > 
      <Route
        path='users'
        element={
          <ProtectedRouteWrapper requiredPermission="per_users">
            <UsersPage />
          </ProtectedRouteWrapper>
        }
      />
    </Route>
</Routes>`

In my ProtectedRouteWrapper component:

`function ProtectedRouteWrapper({ children, requiredPermission }) {
const { isAuthenticated, userData } = useContext(AuthContext);

// Verificar autenticación
if (!isAuthenticated) {
return ;
}

// Verificar permisos
if (requiredPermission && userData?.permisos?.[requiredPermission] !== 1) {
return ;
}

// Renderizar las rutas hijas
return {children};
}

export default ProtectedRouteWrapper;`

The problem is if I use nested routes, in ProtectedRouteWrapper(requiredPermission) always get "undefined", never get real value..

If delete nested routs and use normal routes, requiredPermissions get real value..

So, why using nested routes has that problem? Or What have I do to fix it or use it correctly?

Thanks

P.S: sorry for my english...