Не работает маршрутизация React

Не могу понять в чём ошибка в маршрутизации. Буду очень благодарен за ответ.

import React from "react";
import './App.css';
import Home from './home';
import { Route, Routes, Link, Router } from 'react-router-dom';

function App() {
  



  return (
    
        <><div className="container">
      <div id="bg">
        <div className="form-box">
          <h1>Вход</h1>
          <form name="login">
            <div className="input-group">
              <div className="input-field">
                <input type="text" name="username" placeholder="Логин" />
              </div>
              <div className="input-field">
                <input type="password" name="password" placeholder="Пароль" />
              </div>
            </div>
            <div className="btn-field">
            <button type="submit" value="Login"><Link to="/home">Войти</Link></button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <Routes>
    <Route path="/App/*" element={<App />} /> 
        <Route path="/home" element={<Home />} />
      </Routes>
      </>
     
  );

}



export default App;


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    <BrowserRouter>
    <App />
    </BrowserRouter>
  
);


reportWebVitals();