'Router' from 'react-router-dom' that uses custom history object doesn't change view on Route change [React-Router-Dom v6]

Question

Im trying a simple implement a simple react app that uses 'Router' from react-router-dom that uses custom history object to navigate. But it seems like in the new react version they have made some changes that break the existing react code written in react 17. The code below doesn't change the view or renders a component, but I can see that the URL is changing.

import logo from './logo.svg';
import './App.css';
import './config';
import { Link, Routes, Route, Router } from 'react-router-dom';
import Shellone from './shell-component/shell-one';
import Shelltwo from './shell-component/shell-two';
import history from './history';

const Home = () => {
  return (
  <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Link to="/"><button>Home</button></Link>
        <Link to="/one"><button>Component One</button></Link>
        <Link to="/two"><button>Component Two</button></Link>
  </header>)
}

function App() {

  return (
    <div className="App">
        <Router navigator={history} location={history.location}>
        <Routes> 
            <Route path="/" element={ <Home /> } />
            <Route path="/one" element={ <Shellone /> } />
            <Route path="/two" element={ < Shelltwo /> } />
        </Routes>
        </Router>
    </div>
  );
}

The above code works with 'BrowserRouter'.