i want to do nested routing , is this configuration correct??

[merry trellis]

const routes = createBrowserRouter([
{
path: "/",
element: <App />,
children: [
{
path: "/",
element: <HomeCardComponent />,
},
{
path: "/profile",
element: <ProfileCard />,
render: <Outlet />,
children: [
{
path: "/profile/posts",
element: <Posts />,
},
{
path: "/profile/gallery",
element: <Gallery />,
},
{
path: "/profile/todo",
element: <Todo />,
},
],
},
],
},
]);

import React from "react";
import ReactDOM from "react-dom/client";
import HomeCardComponent from "./components/HomeCard";
import ProfileCard from "./components/ProfileCard";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import Posts from "./components/Posts";
import Gallery from "./components/Gallery";
import Todo from "./components/Todo";
const App = () => {
return (
<>
<Outlet />
</>
);
};

const routes = createBrowserRouter([
{
path: "/",
element: <App />,
children: [
{
path: "/",
element: <HomeCardComponent />,
},
{
path: "/profile",
element: <ProfileCard />,
render: <Outlet />,
children: [
{
path: "/profile/posts",
element: <Posts />,
},
{
path: "/profile/gallery",
element: <Gallery />,
},
{
path: "/profile/todo",
element: <Todo />,
},
],
},
],
},
]);

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<RouterProvider router={routes} />);

heres the full code