Не отрисовывается компонент в react после redirect?

Есть такой протектинг роутов

import React from 'react'
import propTypes from 'prop-types'
import { Route, Redirect } from 'react-router-dom'

class ProtectedRoute extends React.PureComponent {
    constructor(props) {
        super(props)
    }

    render() {
        const {canAccess, component, path, name, exact, strict} = this.props
        const routeProps = {
            path,
            component,
            name,
            exact,
            strict
        }

        return canAccess ?
            <Route { ...routeProps } /> 
        : 
            <Redirect to="/landing"/>
    }
}

ProtectedRoute.propTypes = {
    canAccess: propTypes.bool,
    component: propTypes.func,
    path: propTypes.string,
    name: propTypes.string,
    exact: propTypes.bool,
    strict: propTypes.bool
}

export default ProtectedRoute

значение canAccess беру из redux store, роутинг находится в App.js собственно там и прокидываю пропсу в компонент выше, проблема в том когда происходит редирект на нужный мне компонент, он не рендерится.
Вот нашёл похожую проблему https://stackoverflow.com/questions/42782607/redir...
я так понял это из-за редакса, и вообще такое ощущение что роутинг какой-то кривой, всё как-то рыхло работает вот он

import React from 'react'
import { connect } from 'react-redux'
import propTypes from 'prop-types'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import ProtectedRoute from './protectedRoute'

// Pages
import Landing from './pages/Landing'
import Login from './pages/Login'
import Home from './pages/Home'
import Profile from './pages/Profile'

class App extends React.Component {
    render() {
        const { authenticated } = this.props

        return (
            <Router>
                <div id="app">

                    <Route path="/login" component={ Login }></Route>
                    <Route path="/landing" component={ Landing }></Route>
                    <Route path="/user" component={ Profile }></Route>
                    <ProtectedRoute exact path="/" component={ Home } canAccess={ authenticated }></ProtectedRoute>

                </div>
            </Router>
        )
    }
}

App.propTypes = {
    authenticated: propTypes.bool.isRequired
}

function mapStateToProps(state) {
    const { authenticated } = state.auth
    
    return {
        authenticated
    }
}

export default connect(mapStateToProps, {})(App)