Why doesn't the new 'Routes' syntax in React-router-dom work on my code?

Question

I learnt that after the newly released react packages, the tag in react-router-dom do not work again so I changed to "Routes" after a couple of research online but still, it isn't working. Below is a screenshot from my PC.

Also this is the code

import React from 'react';
import Navbar from './components/Navbar'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import './App.css';
import Home from './components/pages/Home';
import Services from './components/pages/Services';
import Products from './components/pages/Products';
import SignUp from './components/pages/SignUp';



function App(){
    return (
        <>
        <Router>
        <Navbar />
       
        <Routes>
            <Route exact path="/"   component={Home} /> 
            <Route path="/services" component={Services} />
            <Route path="/products" component={Products} />
            <Route path="/sign-up" component={SignUp} />
        </Routes>
        </Router>
       </>
    );
}
export default App;

//<HeroSection />
//import HeroSection from './components/HeroSection';

Answer 1

On new version of react-router-dom this should work. Check it.

<Routes>
    <Route path="/" element={<Home />} /> 
    <Route path="/services" element={<Services />} />
    <Route path="/products" element={<Products />} />
    <Route path="/sign-up" element={<SignUp />} />
</Routes>

Paste your error please. There would another issue

Answer 2

change the Route component to

<Route path="/" element={Home} />

Instead of naming it as components inside the Route you have to use as element.