React Router and useContext not working together

Question

When I'm trying to read data, it is successfully logged in console in every file except in my SwitchRouter.tsx and I don't know why. What I'm trying to do is get value of user(isLogin) and based on that value conditionally render component. (If user is logged in, then user have access to UserContact, UserPosts and AboutMe, and if user is not logged in, then he has access to HomePage only)

NavigationBar.tsx

function NavigationBar() {

    const { user } = useContext(LoginUserContext)

    console.log('nav bar', user)                      // working fine

    return (
        <div>
            <Router>
                <NavLinkRouter />
                <SwitchRouter />
            </Router>
        </div>
    )
}

export default NavigationBar

function SwitchRouter() {

    const { user } = useContext(LoginUserContext)

    console.log('switch route', user)                    // not displaying anything

    return (
        <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/contacts" render={() => (user.isLogin ? <UserContact /> : <Redirect to="/" />)} />
            <Route path="/posts" render={() => (user.isLogin ? <UserPosts /> : <Redirect to="/" />)} />
            <Route path="/aboutme" render={() => (user.isLogin ? <AboutMe /> : <Redirect to="/" />)} />
            <Route path="/login" component={Login} />
        </Switch>
    )
}

export default SwitchRouter

function NavLinkRouter() {

    const history = useHistory()


    const handleLogin = () => {
        history.push('/Login')
        if(user.isLogin) {
            setUser({...user, isLogin: false})
            history.push('/')
        }
    }

    const { user, setUser } = useContext(LoginUserContext)

    console.log('nav link', user)                         //working fine

    return (
        <div className="navBar">
            <ul>
                <li><NavLink className="navlink" activeStyle={{ color: 'rgb(52,48,76)' }} strict to="/" exact>Home Page</NavLink></li>
                <li><NavLink className="navlink" activeStyle={{ color: 'rgb(52,48,76)' }} strict to="/contacts" >User Contacts</NavLink></li>
                <li><NavLink className="navlink" activeStyle={{ color: 'rgb(52,48,76)' }} strict to="/posts" >Posts</NavLink></li>
                <li><NavLink className="navlink" activeStyle={{ color: 'rgb(52,48,76)' }} strict to="/aboutme" >About Me</NavLink></li>
            </ul>
            <button className="btnLogin" onClick={handleLogin}>{user.isLogin ? 'Logout' : 'Login'}</button>
        </div>
    )
}

export default NavLinkRouter

Why is only in SwitchRouter.tsx not displaying anything? And how can I get that value of user to use it for conditional rendering?

Here is snippet