This is my App.js

    import "./App.css";
import Header from "./component/layout/Header/Header.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import React from "react";
import Home from "./component/Home/Home.js";

function App() {
  return (
    <Router>
      <Header />

        <Route exact path="/" component={Home} />

      <Footer />
    </Router>
  );
}

export default App;

This is my Home.js

const Home = () => {
  return (
    <Fragment>
      <div className="banner">
        <p>Welcome to My Website</p>
      </div>
    </Fragment>
  );
};

export default Home;

Edit: i managed to remove the black page after wrapping the Route but the text in Home.js doesn't show "Welcome to My Website"

<Routes>

 <Route exact path="/" component={Home} />

</Routes>

this code ^ removed the blank page but the result is that the text from Home.js "Welcome to My Website" didn't show. How can I route correctly to the Home component?