¿Por qué no funciona la nueva sintaxis de ‘Routes’ en React-router-dom en mi código?

Aprendí que después de las nuevas versiones lanzadas, la etiqueta en react-router-dom ya no funciona, así que cambié a “Routes” después de investigar en línea, pero aún así no está funcionando. A continuación se muestra una captura de pantalla de mi PC.

Además, este es el código:

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></navbar>

        <routes>
            <route exact="" path="/" component="{Home}"></route> 
            <route path="/services" component="{Services}"></route>
            <route path="/products" component="{Products}"></route>
            <route path="/sign-up" component="{SignUp}"></route>
        </routes>
        </router>

    );
}
export default App;

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