I wanted to import react router to my components and got the error as described in the 'title'!

btw I'm doing it from a tutorial crash course!

I will show my files below

App.js

import { BrowserRouter, Route } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import Home from "./Pages/Home";
import About from "./Pages/About";
import Profile from "./Pages/Profile";


function App() {
return (
<BrowserRouter>
  <div className="App">
    <Header />
  </div>
  <Route path="/" component={Home} exact />
  <Route path="/about" component={About} /> 
  <Route path="/profile" component={Profile} />
</BrowserRouter>
);
}
export default App;

Home.js

const Home = () => {
return <h1>Home Page</h1>;
};

export default Home;

About.js

const About = () => {
return <h1>About Page</h1>;
};

export default About;

Profile.js

const Profile = () => {
return <h1>Profile Page</h1>;
};

export default Profile;

Header.js

const Header = () => {
return (
    <>
        <h1>React Router Dom</h1>
    </>
)
}

export default Header;