ネストしたルーティングを実現したい

公式ドキュメントやStackOverflowを読みながら、6系はSwitchコンポーネントではなく、Routesコンポーネントを使用して、ルーティングを実現することできるみたいだということまでは把握しました。

<br/>

RouteコンポーネントでネストしたContentDetailAとContentDetailBが返却されず、困っています。

jsx
1import { BrowserRouter, Link, Routes, Route } from "react-router-dom";
2
3import { Home } from "./Home";
4import { About } from "./About";
5import { Content } from "./Content";
6import { ContentDetailA } from "./ContentDetailA";
7import { ContentDetailB } from "./ContentDetailB";
8
9export const App = () => {
10  return (
11    <BrowserRouter>
12      <div className="App">
13        <Link to="/">Home</Link>
14        <br />
15        <Link to="/about">About</Link>
16        <br />
17        <Link to="/content">Content</Link>
18        <br />
19      </div>
20      <Routes>
21        <Route path="/" element={<Home />} />
22        <Route path="/about" element={<About />} />
23        <Route path="/content" element={<Content />}>
24　　　　　　　　　　　　　　　　　　　　　// 以下2行ののコンポーネントが返却されません
25          <Route path="content/detailA" element={<ContentDetailA />} />
26          <Route path="content/detailB" element={<ContentDetailB />} />
27        </Route>
28      </Routes>
29    </BrowserRouter>
30  );
31};

package.json
1"dependencies": {
2    "@testing-library/jest-dom": "^5.11.4",
3    "@testing-library/react": "^11.1.0",
4    "@testing-library/user-event": "^12.1.10",
5    "react": "^17.0.2",
6    "react-dom": "^17.0.2",
7    "react-router-dom": "^6.0.1",
8    "react-scripts": "4.0.3",
9    "web-vitals": "^1.0.1"
10  },
11

<br/>

試したこと

他のコンポーネントも同様にネストしてみたところ別のコンポーネントでも同様のコンポーネントが返却されない現象が起きました。つまりは、今回の2行のコンポーネントの問題ではなくルーティング関係の書き方に原因があると思います。
Outletコンポーネントを使用したのですが、親コンポーネントの情報と一緒に表示されてしまい、今回のような１コンポーネントで１ページを出力する際には使用できないと考えました。(使い方が間違えていたらご指摘お願いいたします。)