check authenticated user in ProtectedRouter component in react using react router v6

Question

my app.jsx

import axios from "axios";
import { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/Navbar";
import ProtectedRoute from "./components/ProtectedRoute";
import Home from "./pages/Home";
import Login from "./pages/Login";
import MyBlogs from "./pages/MyBlogs";
import Profile from "./pages/Profile";
import Signup from "./pages/Signup";

export const AuthContext = createContext();

const App = () => {
    const [loggedIn, setLoggedIn] = useState(
        Boolean(sessionStorage.getItem("loggedIn"))
    );
    const VUserData = sessionStorage.getItem("userData");
    const [userData, setUserData] = useState(
        VUserData ? JSON.parse(VUserData) : null
    );

    function getUserData() {
        return axios
            .get("/api/user")
            .then((res) => {
                return Promise.resolve(res.data);
            })
            .catch((err) => {
                return Promise.reject(err.response);
            });
    }

    return (
        <BrowserRouter>
            <AuthContext.Provider
                value={{
                    loggedIn,
                    setLoggedIn,
                    userData,
                    setUserData,
                    getUserData,
                }}
            >
                <Routes>
                    <Route path="/" element={<NavBar />}>
                        <Route index element={<Home />} />
                        <Route path="login" element={<Login />} />
                        <Route path="signup" element={<Signup />} />
                        <Route
                            path="profile"
                            element={
                                <ProtectedRoute>
                                    <Profile />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="my-blogs"
                            element={
                                <ProtectedRoute>
                                    <MyBlogs />
                                </ProtectedRoute>
                            }
                        />
                    </Route>
                </Routes>
            </AuthContext.Provider>
        </BrowserRouter>
    );
};

export default App;

my ProtectedRoute.jsx

import { useContext } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { AuthContext } from "../app";

const ProtectedRoute = ({ children, ...rest }) => {
    const { loggedIn, getUserData } = useContext(AuthContext);
    const location = useLocation();

    if (loggedIn) {
        getUserData()
            .then((res) => {
                return children;
            })
            .catch((res) => {
                return (
                    <Navigate
                        to="/login"
                        replace
                        state={{ path: location.pathname }}
                    />
                );
            });
    } else {
        return (
            <Navigate to="/login" replace state={{ path: location.pathname }} />
        );
    }
};

export default ProtectedRoute;

my home.jsx

import React from "react";
import { Outlet } from "react-router-dom";
import NavBar from "../components/Navbar";

const Home = () => {
    return (
        <React.Fragment>
            <NavBar />
            <Outlet />
        </React.Fragment>
    );
};

export default Home;

My problem is after successful login, the profile page not rendering. It's just a blank white page but if I replacegetUserData() and the whole promise resolve with just return children; it's in ProtectedRoute.jsx it's working fine why is that? how could I check whether the user is logged or not by requesting to the backend in ProtectedRoute.jsx