React Router gives a blank screen on protected Route

So essentially, I am trying have an authentication workflow. So basically, the Home route is protected, login is not, register is not, and then I have a verifyEmail page that opens if you arent verified.

const PrivateRoute = ({component: RouteComponent,...rest}) =>{
    const{currentUser}=useContext(AuthContext)

    function route (){

    }

    return(

        <Route
            {...rest}
            render={routeProps =>
                !!currentUser && currentUser != null
                    ?
                    currentUser.emailVerified ? <RouteComponent {...routeProps}/>:(<Redirect to={"/verifyEmail"}/>)
                    :
                    (<Redirect to={"/login"}/>)
            }
        />
    )


}
export default PrivateRoute

And then in App.js I have

function App() {
    return (
        <div className={'App'}>
            <AuthProvider>
                <Router>
                    <div>
                        <PrivateRoute path="/" component={HomePage}/>
                        <Route path="/verifyEmail" component={Verify}/>
                        <Route path="/login" component={Login}/>
                        <Route path="/register" component={Register}/>

                    </div>
                </Router>
            </AuthProvider>
        </div>
    );
}

export default App;

Current User is basically the user credentials, I am using Firebase for authentication. The problem I am having is that after logging in it just shows a blank screen, when the email is not verified instead of showing the verifyEmail page.

To elaborate more on the problem, the actual problem is that if a user is not email verified, then it routes to nowhere, and gives me a blank screen so meaning <Redirect to="/verifyEmail" doesnt work. To debug this further I decided to replace that with a Hello</> and I saw a screen with Hello. So I dont think authentication is the problem, just that it doesnt Route to the appropriate page.

Please help.

import React, { useEffect } from 'react'
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';

export default function RequireAuth({ children }) {
    const history = useHistory();
    const auth = useSelector(state => state.auth)

    useEffect(() => {
        if(!auth){
            history.push("/")
        }
    }, [auth])

    return (
        <>
            {children}
        </>
    )
}

<div>
   <RequireAuth>
       <Route path='/post' component={PostPage} />
   </RequireAuth>
   <Route path='/' exact component={LoginPage} />
</div>