I'm trying to implement react-router-dom into my project, but every time I try to implement it as described in the documentation it just causes a bunch of errors. This is all my code:

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './Login';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

// Login.js
function Login() {
  return (
    <div id="login">
      <form>
        <input type="text" name="username" placeholder="Username" />
        <input type="password" name="password" placeholder="Password" />
        <input type="submit" value="Log in" />
      </form>
      <p>
        Don't have an account? Sign up <a href="#">here</a>
      </p>
    </div>
  );
}

export default Login;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

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

These are screenshots of the errors: image 1 image 2 I'm using React 18.1.0 and react-router-dom's latest version

What am I doing wrong?