Context.Providerのデータが子コンポーネントに渡らない。

Question

前提・実現したいこと

1, react-rouer v6をContext.Providerでラップ
2. 子コンポーネントでuseContextでデータを受け取る。

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

エラーメッセージ等は出ていませんが、データが渡ってきません。

該当のソースコード

ルートコンポーネント

import SignUp from "./components/SignUp";
import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";
import Login from "./components/Login";
import Home from "./components/Home";
import LogOut from "./components/LogOut";
import ErrorPage from "./components/ErrorPage";
import CreateProfile from "./components/CreateProfile";
import React from "react";
import Header from "./components/Header";

//インスタンス化したcreateContextをインポート
import AuthContext from "./contexts/AuthContexst";

function App() {
    return (
        <>
        
            <Header/>
            <Router>
                <nav>
                    <Link to={'/'}>HOME</Link>
                    <Link to={'/signup'}>新規登録</Link>
                    <Link to={'/login'}>ログイン</Link>
                    <Link to={'/logout'}>ログアウト</Link>
                </nav>
                   {/*Routerに渡しているコンポーネントを丸ごとラップ*/}
　　　　　　 {/*テストでvalueに"test"を渡している。*/}
　　　　　　 <AuthContext.Provider value={"test"}>
                    <Routes>
                        <Route path="/" element={<Home/>}/>
                        <Route path="/signup" element={<SignUp/>}/>
                        <Route path="/login" element={<Login/>}/>
                        <Route path="/logout" element={<LogOut/>}/>
                        <Route path="/create_profile" element={<CreateProfile/>}/>
                        <Route path="*" element={<ErrorPage/>}/>
                    </Routes>
　　　　　　 < /AuthContext.Provider>

　　　　　

                <footer>
                    <h4>Footer</h4>
                </footer>

            </Router>
        </>
    );
}

export default App;

子コンポーネント

import React, {useContext} from "react";
import AuthContext from "../contexts/AuthContexst";

{/*テストで受け取る値をコンソールに出力*/}

const CreateProfile = () => {
    const count = useContext(AuthContext)
    console.log(count)
{/*データがわたっていない。*/}
>>> undefined

試したこと

1. Context.Providerをrouterを挟まず直でコンポーネントをラップした時はデータはわたってきました。

補足情報（FW/ツールのバージョンなど）

 "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.24.2",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",

足りない情報や前提が違うかもしれませんが、ご教示いただけますと幸いです!!!
※2時間ハマってしまいました。。。

Answer 1

ラップする場所が悪かったです。。。

ルーターのエンドポイントBrowserRouterからラップすれば問題なく動きました。

//ここからラップする。
 <AuthContext.Provider value={""}>
{/*BrowserRouter as Router*/}
            <Router>  
                <nav>
                    <Link to={'/'}>HOME</Link>
                    <Link to={'/signup'}>新規登録</Link>
                    <Link to={'/login'}>ログイン</Link>
                    <Link to={'/logout'}>ログアウト</Link>
                </nav>
{/*以前はここからラップしていた。*/}
                    <Routes>
                        <Route path="/" element={<Home/>}/>
                        <Route path="/signup" element={<SignUp/>}/>
                        <Route path="/login" element={<Login/>}/>
                        <Route path="/logout" element={<LogOut/>}/>
                        <Route path="/create_profile" element={<CreateProfile/>}/>
                        <Route path="*" element={<ErrorPage/>}/>
                    </Routes>
{/*以前はここからラップしていた。*/}


                <footer>
                    <h4>Footer</h4>
                </footer>

            </Router>
            </AuthContext.Provider>