react routeで子Routeのオブジェクトがレンダリングされない

Question

前提・実現したいこと

react-router-dom v6でルーティング処理を書いているのですが、思った通りにルーティングができないのでこちらで質問させていただきました。

発生している問題・エラーメッセージ

「http://localhost:3000/home/user_management」にアクセスしても親Routeのオブジェクトがレンダリングされてしまい思っている子Routeのオブジェクトがレンダリングされないという事象に陥っています。
子Routeのオブジェクト: <UserManegement /> or <Setting />
親Routeのオブジェクト: <Home />

該当のソースコード

Router.tsx

import { memo, VFC } from "react";
import { Route, Routes } from "react-router-dom";

import { Login } from "../components/pages/Login";
import { homeRoutes } from "./HomeRoutes";
import { Home } from "../components/pages/Home";
import { Page404 } from "../components/pages/Page404";
import { HeaderLayout } from "../components/templates/HeaderLayout";

export const Router: VFC = memo(() => {
    return (
        <Routes>
            <Route path="/" element={<Login />} />
            <Route path="home" element={<HeaderLayout><Home /></HeaderLayout>} >
                {
                    homeRoutes.map((route, index) => (
                        <Route path={route.path} element={<HeaderLayout>{route.children}</HeaderLayout>} />
                    ))
                }
            </Route>
            <Route path="*" element={<Page404 />} />
        </Routes>
    )
}) 

HomeRoutes.tsx

import { UserManegement } from "../components/pages/UserManegement"
import { Setting } from "../components/pages/Setting"

export const homeRoutes = [
    {
        path: "user_management",
        children: <UserManegement />
    },
    {
        path: "setting",
        children: <Setting />
    }
]

自分で調べたことや試したこと

ネストせずに書いた場合はちゃんと想定している通りにルーティングが動いているのでルーティング先のオブジェクトが悪いといったわけではないことは確認しています。
※「<UserManegement />」、「<Setting />」も含めて

ネストしたバージョン
http://localhost:3000/　→　「<Login />」がレンダリングされる
http://localhost:3000/home/　→ 「<Login />」がレンダリングされる

<Route path="/" element={<Login />} >
    <Route path="home" element={<Home />} />
</Route >

ネストしなかったバージョン
http://localhost:3000/　→　「<Login />」がレンダリングされる
http://localhost:3000/home/　→ 「<Home />」がレンダリングされる

<Route path="/" element={<Login />}  />
<Route path="/home" element={<Home />} />

使っているツールのバージョンなど補足情報
package-lock.jsonの一部抜粋

"dependencies": {
        "@chakra-ui/react": "^1.7.4",
        "@emotion/react": "^11.7.1",
        "@emotion/styled": "^11.6.0",
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.4.0",
        "@types/node": "^16.11.21",
        "@types/react": "^17.0.38",
        "@types/react-dom": "^17.0.11",
        "framer-motion": "^5.6.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^6.2.1",
        "react-scripts": "5.0.0",
        "typescript": "^4.5.5",
        "web-vitals": "^2.1.4"
      }

Answer 1

react-router v6 で Route を入れ子にする場合、親の Route の elelment の <Outlet /> が子の Route の element で置き換えられるようです。
参考: React Router 6: Nested Routes

// import に Outlet を追加
import { Route, Routes, Outlet } from "react-router-dom";

      <Routes>
          <Route index element={<Login />} />
          <Route path="home" element={<HeaderLayout><Outlet /></HeaderLayout>} >
              <Route index element={<Home />} />
              {
                  homeRoutes.map(route => (
                      <Route key={route.path} path={route.path} element={route.children} />
                  ))
              }
          </Route>
          <Route path="*" element={<Page404 />} />
      </Routes>