Почему при использовании connect перестаёт работать Route

Использую библиотеку react-redux и react-router-dom и при использовании connect в компоненте App перестаёт работать Route хотя путь в адресной строке меняется, но рендер компонента не происходит App.js

import React from 'react';
import './scss/app.scss';
import {Header, Cart} from './components/index.js';
import {Route} from "react-router-dom";
import Home from "./components/Home";
import axios from 'axios';
import {connect} from 'react-redux';
import {setPizzas} from './redux/actions/pizzas';

function App(props) {

  React.useEffect(() => {
    axios.get('http://localhost:3000/db.json')
      .then(responce => props.setPizzas(responce.data.pizzas));
  }, []);
  return (
    <div className="wrapper">
      <Header/>
      <div className="content">
        <Route path='/cart' exact render={() => <Cart/>}/>
        <Route path='/' render={() => <Home pizzas={props.items}/>}/>
      </div>
    </div>
  );
}

let mapStateToProps = state => {
  return {
    items: state.pizzas.items
  }
}


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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import {Provider} from "react-redux";
import store from './redux/store';


window.store = store

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
        <App />
    </Provider>
  </BrowserRouter>,
  document.getElementById('root')
);