I am a beginner with React and trying to do some Routing.

I'm trying to implement Route in React to redirect to another page, but everytime i insert , it shows error: Invalid hook call.

Here's the code from App.js

    import React from 'react';
    import './App.css';
    import Nav from './Nav';
    import EKGSim from './EKGSim';
    import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
    
    function App() {
      return(
        <Router>
        <div className='App'>
          <Nav />
          <Routes>
            <Route path="/ekgsim" element={<EKGSim/>} />
          </Routes>
        </div>
        </Router>
      )
    }
    
    export default App;

Can anyone tell me where the problem is? I've been trying for hours searching for the solution but came up to nothing. Any help will be appreciated! Thanks

Code for the Nav.js

    import React from 'react';
import './App.css';

function Nav(){
    return(
        <nav>
            <h3>Home</h3>
            <ul className='nav-links'>
                <li>Was Ist EKG?</li>
                <li>EKG Component</li>
                <li>EKG Simulator</li>
            </ul>
        </nav>
    );
}

export default Nav;

and the EKGSim.js

import React from 'react';
import './App.css';

function EKGSim(){
    return(
        <div>
            <h1>EKG Simulator

            </h1>
        </div>
    );
}

export default EKGSim;