protected route not rendering protected componet after authentication - reactjs

Question

So I have a react app and I want to redirect users to a dashboard after authentication. I am using react-router-dom. The surprising thing is that after all setup and I try to access the protected route without authentication it redirects me back to the home page which works well also, when I console log to check if user verification function works. it returns authenticated user which means that is also working well. But when I sign in as a user react is supposed to render the dashboard but unfortunately it doesn't. I am so confused at the moment. Please some assistance would be highly appreciated. Thanks
ProtectedRoute.js
import React from 'react';
import PropTypes from 'prop-types';
import {Route,Redirect} from 'react-router-dom';
const ProtectedRoute = ({isAuth:isLoggedin,component:Component,...rest})=>{
console.log(Component,isLoggedin)
return (
<Route
{...rest}
render={(props)=>{
if(isLoggedin){
return <Component />
}else{
return(
<Redirect to={{
pathname:'/',
state: {from: props.location}
}}
/>
)
}
}
}
/>
)
}
export default ProtectedRoute;
ProtectedRoute.propTypes={
isAuth: PropTypes.bool.isRequired
}
App.js
const App = ()=>{
const [isClicked, setIsClicked]= useState(false);
const [username,setUsername] = useState()
const [pass,setPass] = useState();
const [isLoggedIn,setIsLoggedIn] = useState(false);
const [authUser,setAuthUser] = useState({})
const disableScroll =()=>{
document.body.style.overflow = 'hidden';
document.querySelector('html').scrollTop = window.scrollY;
}
const enableScroll=()=>{
document.body.style.overflow = null;
}
const handleLogin = () =>{
setIsClicked(!isClicked);
if(!isClicked){disableScroll()}
else if(isClicked){enableScroll()}
}
const handleLogout = ()=>{
setIsLoggedIn(!isLoggedIn)
{<Redirect to={{
pathname: "/",
state: { from: props.location }
}}
/>}
console.log(isLoggedIn)
}
const getUser = ()=>{
Users.forEach((user)=>{
if(user.username === username)return user
})
}
const login=()=>{
const curUser = Users.filter((el)=>{
if(el.username === username) return el
})
if(curUser[0].username === username && curUser[0].pass.toString() === pass){
setAuthUser(curUser[0]);
setIsLoggedIn(!isLoggedIn)
enableScroll();
}else{alert('invalid username or password')}
}
return(
<LoginContext.Provider value={{isClicked,setIsClicked,handleLogin,setUsername,
setPass,login,isLoggedIn,authUser,setAuthUser,handleLogout}}>
<BrowserRouter>
<Switch>
<Route exact path='/' component={HomePage}>
<HomePage/>
</Route>
<ProtectedRoute exact path='/Dashboard' isAuth={isLoggedIn} component={Dashboard}/>
</Switch>
</BrowserRouter>
</LoginContext.Provider>
);
}
export default App;