Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') at app.js or maybe index.js (see below)

Question

at app.js I don't know if I miss something or implementing router incorrectly. But I quite confident that is correct. feel free to ask me if you have more question and I would give more direct answer as I can

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router ,Routes ,Route
} from 'react-router-dom';
import Home from './pages/main';
import PremiumPage from './pages/premium';
import ContactPage from './pages/contact';
import CreatingAccountPage from './pages/process';
import ProfileEditPage from './pages/profile';
import ChatPage from './pages/chat';
import ListPage from './pages/listUsers';
import PrivacyPage from './pages/privacy';
import { AuthContextProvider } from './Context/AuthContext';

function App() {

  return (
    <Router>
        <AuthContextProvider>
        <Routes>
          <Route path='/' element={<Home/>} exact />
          <Route path='/premium' element={<PremiumPage/>} />
          <Route path='/contact' element={<ContactPage/>} />
          <Route path='/process' element={<CreatingAccountPage/>} />
          <Route path='/profile' element={<ProfileEditPage/>} />
          <Route path='/chat' element={<ChatPage/>} />
          <Route path='/listUsers' element={<ListPage/>} />
          <Route path='/privacy' element={<PrivacyPage/>} />
        </Routes>
        </AuthContextProvider>
    </Router>
   
  );
}
export default App;

and index.js

import React from 'react';
import App from './App';
import { createRoot } from 'react-dom/client';
import './index.css';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
        <App />
  </React.StrictMode>
);