`I’ve been working on a React application using React 17 and React Router v6.
I now updated react to v18
I’m facing an issue where clicking on a or useNavigate updates the URL in the address bar, but the page does not navigate or re-render the intended component and becomes unresponsive.

Versions of my dependencies:

“react”: “^18.3.1”,
“react-dom”: “^18.3.1”,
“react-router-dom”: “^6.24.0”

here is index.js

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

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);

root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

here is my App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<h1>Page Not Found</h1>} />
      </Routes>
  
  );
}

export default App;

I tried upgrading react, react-router-dom, and react-dom to the latest versions.`