Getting errors when importing BrowserRouter as Router, Route, Routes

I am creating a React app and trying to add routes using react-router-dom but when importing

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

I am getting a ton of errors which are as follows

there are many more (if needed ask for in the comment I’ll post them)

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 />);

App.js

I am trying to route “/login” to Login and “/register” to Register but when importing the routes from react-router-dom I am getting errors, even when I am not using them in my code

import "./App.css";
import Login from "./components/Login/Login";
import Register from "./components/Register/Register";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Register />
      <Login />
    </div>
  );
}

export default App;

I am using “react-router-dom”: “^6.21.1”

I tried fresh installing the react-router-dom but still didn’t work.

I have never faced this before and I don’t know whats wrong this time.