React Router и useContext не работают вместе

Question

Когда я пытаюсь прочитать данные, они успешно регистрируются в консоли во всех файлах, кроме моего SwitchRouter.tsx, и я не знаю почему. То, что я пытаюсь сделать, это получить значение пользователя (isLogin) и на основе этого значения условно визуализировать компонент. (Если пользователь вошел в систему, то у пользователя есть доступ к UserContact, UserPosts и AboutMe, а если пользователь не вошел в систему, то у него есть доступ только к HomePage)

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

Почему только в SwitchRouter.tsx ничего не отображается? И как я могу получить это значение пользователя, чтобы использовать его для условного рендеринга?

Вот фрагмент