Router renders nothing

Question

I copied store/Router solution from my previous project where it was working fine. Then updated redux/router/dom dependencies, made some changes, ex. deleted IndexRoute and used createBrowserHistory. In dev. tools it shows up that Provider component is rendered but it doesn't render any other component.

index.js

    import React from 'react';
    import { render } from 'react-dom';
    import Foo from './components/Foo ';
    import Bar from './components/Bar ';
    import Components from './components/App'
    import { BrowserRouter as Router, Route, IndexRoute } from 'react-router-dom';
    import { Provider } from 'react-redux';
    import store, { history } from './store';

const router = (
  <Provider store={store}>
    <Router history={history}>
          <Route exact path="/" exact component={Components.MainConnectedWithProps} />
          <Route exact path="/foo" component={Components.FooConnectedWithProps} />
          <Route exact path="/bar" component={Components.BarjkaConnectedWithProps} />
    </Router>
  </Provider>
)

render(router, document.getElementById('root'));

//render(<Foo />, document.getElementById('root')); works just fine

App.js

  import * as actionCreators from '../actions/actionCreators' 
    import {bindActionCreators} from 'redux'
    import Main from './Main'
    import Foo from './Foo '
    import Bar from './Bar '
    import { connect } from 'react-redux'

function mapStateToProps(state) {
            return {
                     sampleData: state.sampleData
            }
        }
function mapDispachToProps(dispatch){
        return bindActionCreators(actionCreators, dispatch)
        }


export default {
    MainConnectedWithProps : connect(mapStateToProps, mapDispachToProps)(Main),
    FooConnectedWithProps: connect(mapStateToProps, mapDispachToProps)(Foo),
    BarConnectedWithProps: connect(mapStateToProps, mapDispachToProps)(Bar)
  }

store.js

import { createStore } from 'redux'
import {syncHistoryWithStore} from 'react-router-redux'
import { createBrowserHistory } from 'history'

import rootReducer from './reducers/index';

const defaultState = {
    sampleData: sampleData
}

const store = createStore(rootReducer, defaultState)
export const history = syncHistoryWithStore(createBrowserHistory(), store);
export default store;

package.json

"react-dom": "^17.0.1",
"react-redux": "^4.4.10",
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
"react-router-redux": "^4.0.8"

I'm pretty new to React so this might be some silly mistake. Thanks everyone in advance.

EDIT: I created sandbox with main features - render many components on one "/" path and specific component with "/foo" or "/bar" paths using redux. It works just fine after changing BrowserRouter to Router with history object. https://codesandbox.io/s/old-dawn-spggs?file=/src/components/App.js

But when I try the same on VS Code it gives The prop location is marked as required in Router, but its value is undefined error for Router history={history} and no errors but renders nothing for <BrowserRouter />

EDIT 2: I used exacly the same history, react, redux dependencies verion as in codesandbox and it worked too in VS Code. But Link seems not to work now. When I type "/bar" manually it renders Bar but when I click on Link path="/bar" it renders nothing.

EDIT 3: I took a closer look at links suggested in comments, and the solution is to downgrade history dependency to 4.7.1.

Also, is using this MainConnectedWithProps,FooConnectedWithProps...for every single component a good idea to pass props? I used to use React.CloneElement but I guess it's a not thing since IndexRoute is gone?