PrivateRoute で useContext から値が取得できない

Question

PrivateRoute を作成して、ユーザーがログインされいてるか判断し、ページ遷移をしております。
ユーザ情報取得はuseContextを使用しておりますが、こちらが常にnullになってしまいます。
Routeで指定したコンポーネント からはuseContextを使用してユーザ情報取得ができることを確認済みです。

どのようにすればユーザ取得できるか分からないまま１週間程度悩んでおり、アドバイスいただけると幸いです。

解決できそうなので、追記します。

こちらにリンクから飛べば、期待通りに動きます。

<Link to='/collection/create'>RestaurantCreate</Link>

しかし、urlで/collection/createを直接叩くと、ユーザ情報がnullになりました。
これは、urlを直接叩くと、その時点でuseContextからユーザー情報は取得できないということですかね？

PrivateRoute.js

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "./Auth";
import PropTypes from "prop-types";

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  // FIX currentUserがnullになる
  const { currentUser } = useContext(AuthContext);
  console.log(currentUser);

  return (
    <Route
      {...rest}
      render={(routeProps) =>
        currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};

PrivateRoute.propTypes = {
  component: PropTypes.func.isRequired,
};

export default PrivateRoute;

App.js

import React, { useContext } from "react";
import Login from "./components/auth/Login";
import { AuthProvider } from "./components/auth/Auth";
import PrivateRoute from "./components/auth/PrivateRoute";
// 長くなるのでその他コンポーネント省略

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <div className='App'>
          <Header />
          <main>
            <Switch>
              <Route exact path='/' component={Main} />
              <Route exact strict path='/about' component={About} />
              <Route exact strict path='/contact' component={Contact} />
              <PrivateRoute
                exact
                path='/collection/create'
                component={RestaurantCreate}
              />
              <Route path='/collection/:id' component={Restaurant} />
              <Route path='/login' component={Login} />
              <Route path='/signup' component={SignUp} />
              <Route component={NotFound} />
            </Switch>
          </main>
          <Footer />
        </div>
      </AuthProvider>
    </BrowserRouter>
  );
}

export default App;

Auth.js

import React, { useState, useEffect } from "react";
import fire from "../../config/fire";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    fire.auth().onAuthStateChanged((user) => setCurrentUser(user));
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};