Wenever i use Router it doesnt display anything on the screen

Question

//am working on a react.js app but wenever i use Router it doesnt display anything on the screen...the screen is blank pls help

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Switch } from 'react-router-dom';
import Footer from './components/Footer/Footer';
import Home from './components/home/Home';
import MovieDetail from './components/movieDetails/MovieDetail';
import PagenotFound from './components/PageNotFound/PagenotFound';
import './App.scss';

function App() {
  return (
    <div className="app">
    
    <Router>
    <Routes>
      <Route path="/"  component={Home} />
      <Route path="/movie/:imdbID" component ={MovieDetail} />
      <Route component = {PagenotFound} />
      <Footer />
      </Routes>
     </Router>
  
      </div>
  );
} 

export default App;

//this is my >Home.js

import React from 'react';
import "./Home.scss";

    const Home = () => {
        return (
            <div >
               Home
            </div>
        );
    };
    
    export default Home;