How to restore Scroll position in react?

I am currently using version 6 and I cannot find any modern solution to this one. Since the previous tutorial are using old Browse router version.

import Navbar from './components/Navbar';
import Home from './Home';
import MovieDetails from './components/MovieDetails';
import Footer from './components/Footer';


import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import data from './data/data'
import './App.css';


function App() {
    
  return (
    <Router>
      <div className="App">
        <Navbar></Navbar>
      <Routes>
      <Route exact path='/' element={<Home></Home>} ></Route>
      <Route  path='/movies/:id' element={<MovieDetails ></MovieDetails>} ></Route>
      </Routes>
      <Footer></Footer>
      </div>
    </Router>

  );
}

export default App;

what would be the best way to fix this issue every time I click on a link it keeps its position on the page.