React router not render component after redirect

I am using react with hooks and context api for passing my state as props to other components. I have created routing based on logged in users and visitor. I am facing one issue here. When user logout, it should redirect to login page. URL is being change but login component is not rendering. while after login I can redirect to my account page.

INDEX.JS FILE (Only added the required snippet here)

import AuthContextProvider from './context/auth-context';

ReactDOM.render(
    <AuthContextProvider>
        <App />
    </AuthContextProvider>,
    document.getElementById('root'));

HERE IS MY APP.JS

import React, { useContext } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container } from 'reactstrap';
import Navbar from './components/shared/Navbar/Navbar';
import Home from './components/Home/Home';
import Login from './components/Auth/Login/Login';
import Signup from './components/Auth/Signup/Signup';
import Footer from './components/shared/Footer/Footer'
import { AuthContext } from './context/auth-context';
import MyAccount from "./components/User/MyAccount";
import Logout from "./components/Auth/Logout/Logout";
import Error from "./components/Error";

const App = (props) => {
  const authContext = useContext(AuthContext);
  let routes;
  console.log(authContext.isAuth, 'in app');
  if (authContext.isAuth) {
    routes = (
      <>
        <Route path="/my-account" component={MyAccount} />
        <Route path="/logout" component={Logout} />
      </>
    );
  } else {
    routes = (
      <>
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
      </>
    );
  }


  return (
    <BrowserRouter>
      <Container>
        <Navbar />
        <Switch>
          <Route path="/" exact component={Home}  />
          {routes}
          <Route component={Error} />
        </Switch>
        <Footer />
      </Container>
    </BrowserRouter>
  );
}

export default App;

HERE IS MY AUTH-CONTEXT.JS

import React, { useState } from 'react';

export const AuthContext = React.createContext({
  isAuth: false,
  login: () => {}
});

const AuthContextProvider = props => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  if(localStorage.getItem('token') != null && !isAuthenticated){
    setIsAuthenticated(true);
  }

  const loginHandler = () => {
    setIsAuthenticated(true);
  };
  //console.log(isAuthenticated,'ssss')
  return (
    <AuthContext.Provider
      value={{ login: loginHandler, isAuth: isAuthenticated }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

HERE IS LOGOUT.JS

import React, { useState ,useEffect, useContext } from "react";
import { AuthContext } from '../../../context/auth-context';
import { Redirect, withRouter } from 'react-router-dom';

const Logout = (props) => {

    const authContext = useContext(AuthContext);
    let [isLogout, setIsLogout] = useState(false);

    localStorage.removeItem('token');
    localStorage.removeItem('expiryDate');
    localStorage.removeItem('userId');

     useEffect(() =>{
        setIsLogout((preIsLogout) => {
            isLogout = !preIsLogout;
        });
        authContext.isAuth = false;
        console.log('logout', isLogout)
        //props.history.push('/login');

    },[])



    return (
        <React.Fragment>
         { isLogout ? <Redirect to="/login" /> : null} 
            <div>
                <p>Logout</p>
            </div>
        </React.Fragment>
    )


}

export default withRouter(Logout);