Как загрузить данные Firebase до того, как компонент отобразится в ответ?

У меня есть следующие файлы...

useAuthStatus.js

import {useEffect, useState, useRef} from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const useAuthStatus = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [checkingStatus, setCheckingStatus] = useState(true);
  const isMounted = useRef(true);

  
  useEffect(() => {
    if (isMounted) {
      const auth = getAuth();

      onAuthStateChanged(auth, (user) => {
        if (user) {
          setLoggedIn(true);          
        }

        setCheckingStatus(false);
      });
    }

    return () => {
      isMounted.current = false;
    }      
  }, [isMounted]);

  return {loggedIn, checkingStatus}
}

export default useAuthStatus

PrivateRoute.jsx

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import useAuthStatus from '../hooks/useAuthStatus';
import Spinner from './Spinner';

const PrivateRoute = () => {
  const {loggedIn, checkingStatus} = useAuthStatus();

  if (checkingStatus) {
      return <Spinner/>
  }

  return loggedIn ? <Outlet /> : <Navigate to='/sign-in' />
  
}

export default PrivateRoute

Профиль.jsx

import React, {useState} from 'react';
import { db } from '../firebase.config';
import { getAuth, signOut, updateProfile } from 'firebase/auth';
import {doc, updateDoc} from 'firebase/firestore';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';

const Profile = () => {
  const auth = getAuth();

  const [changeDetails, setChangeDetails] = useState(false);

  const [formData, setFormData] = useState({
    name: auth.currentUser.displayName,
    email: auth.currentUser.email
  });

  const {name, email} = formData;

  const navigate = useNavigate();

  const onLogOut = async () => {
    await signOut(auth);

    navigate('/');
  }

  const onSubmit = async () => {
    try {
      if (auth.currentUser.displayName !== name) {
        //update display name in firebase auth
        await updateProfile(auth.currentUser, {
          displayName: name
        });

        //update name in firestore
        const userRef = doc(db, 'users', auth.currentUser.uid);

        await updateDoc(userRef, {
          name: name
        })
      }
    } catch (error) {
      toast.error('Unable to change profile details');
    }
  }

  const onChange = (e) => {
    setFormData((prevState) => (
      {
        ...prevState,
        [e.target.id]: e.target.value
      }
    ))
  }


  return (
    <div className='profile'>
      <header className='profileHeader'>
        <p className='pageHeader'>My Profile</p>
        <button type='button' className='logOut' onClick = {onLogOut}>Logout</button>
      </header>

      <main>
        <div className='profileDetailsHeader'>
          <p className='profileDetailsText'>Personal Details</p>
          <p className='changePersonalDetails' onClick = {() => {
            changeDetails && onSubmit();
            setChangeDetails((prevState) => !prevState);
          }}>
            {changeDetails ? 'done' : 'change'}
          </p>
        </div>

        <div className='profileCard'>
          <form>
            <input type = "text" id='name' className = {!changeDetails ? 'profileName' : 'profileNameActive'} disabled = {!changeDetails} value = {name} onChange = {onChange}/>

            <input type = "text" id='email' className = {!changeDetails ? 'profileEmail' : 'profileEmailActive'} disabled = {!changeDetails} value = {email} onChange = {onChange}/>
          </form>
        </div>
      </main>
    </div>
  )
}

export default Profile

App.jsx

import React from "react";
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import { ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

import Navbar from "./components/Navbar";
import PrivateRoute from "./components/PrivateRoute";

import Explore from './pages/Explore';
import ForgotPassword from './pages/ForgotPassword';
import Offers from './pages/Offers';
import Profile from './pages/Profile';
import SignIn from './pages/SignIn';
import SignUp from './pages/SignUp';

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path = "/" element = {<Explore />}/>
          <Route path = "/offers" element = {<Offers />}/>
          
          <Route path = "/profile" element = {<PrivateRoute />}>
            <Route path = "/profile" element = {<Profile />} />
          </Route>
          
          <Route path = "/sign-in" element = {<SignIn />}/>
          <Route path = "/sign-up" element = {<SignUp />}/>
          <Route path = "/forgot-password" element = {<ForgotPassword />}/>
        </Routes>

        <Navbar />
      </BrowserRouter>

      <ToastContainer position = "top-center" hideProgressBar = {true} autoClose = {3000} pauseOnHover = {false}/>
    </>
  );
}

export default App;

Это текущий рабочий код... я кратко объясню, что происходит, прежде чем перейти к моему вопросу. Когда неавторизованный пользователь посещает «/profile», он перенаправляется к компоненту PrivateRoute. Если пользователь вошел в систему, то визуализируется компонент <Outlet/> из реагирующего маршрутизатора, а затем визуализируется компонент профиля. Однако, если пользователь не вошел в систему, он перенаправляется на «/ sign-in» с помощью PrivateRoute. Также обратите внимание на вложенные маршруты в App.jsx.

Если я удалю строку <Route path = "/profile" element = {<Profile />} /> в App.jsx из вложенного маршрута и сделаю его обычным маршрутом, то при загрузке компонента Profile я получу ошибку «TypeError: Cannot read properties of null». Я полагаю, что получаю эту ошибку, потому что компонент загружается до того, как const auth = getAuth(); (в Profile.jsx) закончил получение данных и заполнение имени и адреса электронной почты в useState().

Теперь мой вопрос: в useAuthStatus.js я использую getAuth() для извлечения данных, а затем СНОВА я использую getAuth() для извлечения данных в Profile.jsx. Так почему же работает код вложенных маршрутов (исходный), а не эта измененная версия? Если мне нужно снова использовать getAuth() в Profile.jsx, то почему данные загружаются ДО компонента? Во вложенных маршрутах, если внешний «/ профиль» использует getAuth(), тогда эти данные каким-то образом передаются и во вложенный маршрут?