So I have a component rendering the routes and before that in the useEffect I am calling the isLoggedIn Api before setting the react context.

useEffect(() => {
    async function performAuthRedirection() {
        const data = await isLoggedIn();
        if (data.userSignedIn) {
            setAuthState(data.userData);
            return navigate(location.pathname);
        }
        if (!data.userSignedIn || authState._id === '') {
            navigate('/signIn');
        }
    }
    performAuthRedirection();
}, []);

return <Routes>
            <Route
                path="/"
                element={
                    <HomePage
                        authState={authState}
                    />
                }
            />
        </Routes>

In home page I need to call another api that gives me access denied if I am not signed in. Now since the homepage(child component of above component renders first) this above component renders last(even though I am updating the react.context) and thats why I always see access denied. What can I do to re render the homepage such that it renders again.