React-Router V6でuseNavigate利用時のBrowserRouterの適切な位置と影響範囲が分かりません。

Question

React-Router V6に更新したのですが、useNavigateはRouterを使わないとダメだと言われたので、
利用箇所をRouterで囲ったのですが、下記エラーが取れず困っております。
タイトルの通り不明点はRouterをどこに設定するかになります。

**Uncaught Error: useNavigate() may be used only in the context of a <Router> component.
**

ヘッダーのメニュー部分で認証画面に飛ばしたいので、ヘッダー関連のindex.tsx内でuseNavigateを使う
HeaderMenuをRouterで囲みましたがダメで、menu.tsxも囲ってみましたが変化ありませんでした。

index.tsx

const Header: FC<Props> = ({ openDialog }) => {
  const [open, setOpen] = useState(false);

  return (
    <header css={wrapperStyle}>
      <a css={anchorStyle} href="/lp.html">
        <img css={imageStyle} src="/images/logo_white.png" />
      </a>
      <div css={menuStyle}>
        <button
          css={menuButtonStyle}
          onClick={() => {
            setOpen(true);
          }}
        >
          <i className="material-icons" css={menuIconStyle}>
            menu
          </i>
        </button>
        <BrowserRouter>
          {open ? (
            <HeaderMenu onClick={setOpen} openDialog={openDialog} />
          ) : null}
        </BrowserRouter>
      </div>
    </header>
  );
};

menu.tsx

import { useNavigate, BrowserRouter as Router, Routes } from "react-router-dom";
　　・
　　・
　　・
  const navigate = useNavigate();
  const handleOnClickMoveLogin = () => {
    navigate("auth/home");
  };

  return (
    <Router>
      <Routes>
        <ul css={menuStlye}>
          <li css={menuListStyle}>
            <button css={menuButtonStyle} onClick={handleOnClickCreateRoom}>
              フライト作成
            </button>
            <button css={menuButtonStyle} onClick={handleOnClickMoveLogin}>
              ログイン/サインイン
            </button>
            <button css={menuButtonStyle}>フライト検索</button>
            <button css={menuButtonStyle}>マイページ</button>
            <button css={menuButtonStyle}>プレミアム</button>
          </li>
        </ul>
      </Routes>
    </Router>
  );
};

そもそもソースコード全体に影響するのかと思い、上記箇所のRouterも含め削除しmain.tsxのみBrowserRouterで囲ったのですが、
今度は以下のエラーになります。

Uncaught Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

main.tsx

(async () => {
  log(`${name} v${version}`);
  document.title += ` v${version}`;

  render(
    <React.StrictMode>
      <Global styles={globalStyle} />
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("contents")
  );
})().catch((err) => console.error(err));

React-Router関連のディレクトリ構造は以下になるのですが、
この場合、どこをRouterで囲えば良いのでしょうか？？

srcーauthーHome
　　　　　　　　　　　　　　　ーSigninなど
　　　　　ーlpーheaderーindex
　　　　　　　　　　　　　　　　　　　　　　　　ーmenu
　　　　　　　　　　　ーmain
　　　　　　　　　　　ーapp
　　　　　ーrouterーrouterなど

Answer 1

エラーに関してはRoutes内で別のコンポーネントを使っていた箇所があり、そこを修正すると解決しました。
範囲に関しても、App.tsxをBrowerRouterで囲うことで解決しました。

未だ腑に落ちていませんが違う質問になると思うので、こちらはクローズします。