Issue with React Router

I'm using react-router-dom but my routes are somehow not working. the routes are not redirected to the component. I don't have any error in the console, and I did npm install react-router-dom. I can't see what I've done wrong. You can find my code below. Any help will be welcome.

This is my App.js page

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route
  
} from "react-router-dom";

import LoginButton from './components/LoginButton';
import Register from './components/Register';
import Login from './components/Login';

function App() {
  return (
   

    <Router>
      <div>
    <div className="cover d-flex justify-content-center align-items-center">
    <div className="text-white">
    <h1 className="text-center fw-bold">GREEN</h1>
    <p className="lead fw-bold">CARBON FOOTPRINT CALCULATOR</p>
    <LoginButton />
    </div>
   
    </div>

   <Switch>

   <Route path="/register">
     <Register />
  </Route>

         <Route path="/login">
           <Login />
         </Route>

         <Route path="/">
           <App />
         </Route>



   </Switch>
   
    </div>
    </Router>
  );
}

export default App;

This is the component page

import React, { Component } from 'react';
import './LoginButton.css'
import { Link } from "react-router-dom";

export default class LoginButton extends Component {
    render() {
        return (
            <div>
                 <div className="login-container">
            <Link to="/register"><button className="signup-button">SIGN UP</button></Link>
            
            <Link to='/login'><button className="login-button">LOG IN</button></Link>
        </div>
            </div>
        )
    }
}