Маршруты маршрутизатора React не соответствуют местоположению

Не знаете, почему это не работает? Все было импортировано правильно, поэтому я не уверен, почему я получаю следующее сообщение об ошибке в консоли:

No routes matched location "/"

App.jsx

import './App.css';
import React from 'react';
import Home from './pages/Home';
import Explore from './pages/Explore';
import { BrowserRouter as Router, Routes, Route, useRoutes} from "react-router-dom";
// import { useState } from "react";

const App = () => {
  let routes = useRoutes([
      <Routes>
        <Route path = "/" exact element = {<Home />} />
        <Route path = "/explore" exact element = {<Explore />}/>
      </Routes>
  ])
  return routes;
}

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

export default AppWrapper;

И домашний файл

import React from 'react';
import { useNavigate } from "react-router-dom";

const Home = () => {
    const navigate = useNavigate();
    return (
        
        <div>
            <div>
                <button onClick = {() => {navigate("/explore");}}>  
                    Explore page
                </button>
                <h1>Home page</h1>
            </div>
        </div>
    );
}

export default Home;