I have an app.js something like this

class App extends React.Component {
    render() {
        return (
            <Routes>
                <Route path="/"
                    element={
                        <PrivateRoute
                            auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
                        >
                            {' '}
                            <Navigate to="/dashboard" />
                        </PrivateRoute>
                    }
                />
                <Route path="/login"
                    element={
                        <PublicRoute
                            auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
                        >
                            {' '}
                            <LoginPage />
                        </PublicRoute>
                    }
                />
                <Route path="/dashboard"
                    element={
                        <PrivateRoute
                            auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
                        >
                            {' '}
                            <DashboardPage />
                        </PrivateRoute>
                    }
                />

and my authentication resource like this

import StorageFactory from './storage';

const AuthenticationResource = (() => {
    const storage = StorageFactory();

    const getSessionId = function () {
        console.log('sessioncookie', storage.getItem());
        return storage.getItem();
    };

    const removeSessionId = function () {
        return storage.removeItem();
    };

    return {
        isLoggedIn: () => typeof getSessionId() === 'string' && getSessionId().length > 0,
    };
})();

export default AuthenticationResource;

I have placed a console statement in the getSessionId function. I am able to see the console logs when the page is loading the first time. But whenever I am moving between pages using navigate, I don't see the console logs, which I am inferring that the isLoggedIn() is not getting called. Please help me out. Thanks in Advance

P.S This is how the private routing and public routing are defined

const PublicRoute = ({ auth: { isAuthenticated }, children }) => {
    return isAuthenticated ? <Navigate to="/dashboard" /> : children;
};

const PrivateRoute = ({ auth: { isAuthenticated }, children }) => {
    return isAuthenticated === true ? children : <Navigate to="/login" />;
};