React component not getting rendered without a reload --using <Navigate/> - reactjs

Question

I am using react 18 ,redux and react-router dom to navigate to and from pages. HOwever after successful login the screen first shows the homepage for a split second then a loader and then the screen completely goes white. But after only pressing reload manually once the Home component is rendered again. Also my Home page has a lot of nested components in its tree passing props to each other's child.
I wonder if it has something to do with the redux action dispatches?
How to make the Home page load in the first go itself?
Here is my App.js=>
import { Fragment, useEffect, useState } from 'react';
import {BrowserRouter as Router , Routes , Route , Navigate} from 'react-router-dom';
import './App.css';
import Header from './components/Header/Header';
import Home from './components/Home/Home.js';
import LandingPage from './components/Landing/Landing.js'
import Login from './components/Login/Login';
import { useDispatch, useSelector } from 'react-redux';
import { loadUser } from './Actions/UserActions';
import Account from './components/Account/Account.js'
function App() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(loadUser());
}, [dispatch])
const {isAuthenticated} = useSelector(state=>state.user);
const [reload, setReload] = useState(false);
return (
<Fragment>
<Router>
{isAuthenticated && <Header/>}
<Routes>
<Route path='/' element={!isAuthenticated? (<Navigate to='/login' replace={true} />): (<Home/>)}/>
<Route path='/welcome' element={<LandingPage/>}/>
<Route path='/login' element={!isAuthenticated? <Login/> :(<Navigate to='/' replace={true}/>)}/>
<Route path='/account' element={!isAuthenticated? (<Navigate to='/' />): <Account/>}/>
</Routes>
</Router>
</Fragment>
);
}
export default App;
Here is my Home component=>
import React, { useEffect, useState } from 'react'
import './Home.css'
import User from '../User/User.js'
import Post from '../Post/Post.js'
import { useDispatch, useSelector } from 'react-redux'
import { getAllUsers, getPosts } from '../../Actions/UserActions'
import Loader from '../Loader/Loader'
import { Typography } from '#mui/material'
import Metadata from '../Metadata/Metadata'
const Home = () => {
const dispatch=useDispatch();
const { loading,posts,error} = useSelector(state =>state.getPosts)
const { usersLoading , users ,userError} =useSelector(state=>state.allUsers)
const { error: likeError, message } = useSelector((state) => state.like);
useEffect(() => {
dispatch(getPosts());
dispatch(getAllUsers());
}, [dispatch])
useEffect(() => {
if (error) {
dispatch({ type: "clearErrors" });
}
if (likeError) {
dispatch({ type: "clearErrors" });
}
}, [alert, error, message, likeError, dispatch]);
return loading===true||usersLoading===true? (
<Loader />)
:(
<div className="home">
<Metadata title='Civilised' />
<div className="homeleft">
{
posts&&posts.length>0 ? posts.map((post)=>
(<Post
key={post._id}
postId={post._id}
caption={post.caption}
postImage={post.image.url}
likes={post.likes}
isLiked={false}
comments={post.comments}
ownerImage={post.owner.avatar.url}
ownerName={post.owner.name}
ownerId={post.owner._id}
/>)
): (<Typography variant='h6'>No posts</Typography>)
}
</div>
<div className="homeright">
{
users ? users.map((user)=>(
<User
key={user._id}
userId={user._id}
name={user.name}
avatar={'https://media-exp1.licdn.com/dms/image/C5603AQHlHovW8nMkFA/profile-displayphoto-shrink_200_200/0/1610020467592?e=2147483647&v=beta&t=vBPLqLRHM1Py_hRw7vSbT86TKE7UREGqCFyvoYGyJoc'}
//avatar={currentUser.avatar.url}
/>
)) : null
}
</div>
</div> )
}
export default Home
Here are the warnings I face just after a successful login when the page goes blank=>
Here are the warning I get in the console after I reload the page and the is successfully rendered and functioning well.=>