Using createBrowserRouter and createRoutesFromElements to create routes and navigate between to components

I have two components, the Homepage and AboutMe components that I would like to navigate to using their respective links About Me and Home.

Homepage.js

function HomePage(){
    return(
        <h1>Welcome to my site</h1>
    )
}
export default HomePage;

AboutMe.js

function AboutMe(){
    return(
        <h1>About Me</h1>
    )
}

export default AboutMe;

With the code below, without the navigation links, I'm able to navigate to the Homepage component using http://localhost:3001/ and the AboutMe component using http://localhost:3001/about-me

import React from "react";
import AboutMe from "./AboutMe";
import HomePage from "./Homepage";
import { 
  createBrowserRouter, 
  createRoutesFromElements, 
  Route, 
  RouterProvider,
  Link
} from 'react-router-dom';


// router and routes
const router = createBrowserRouter(
  
  createRoutesFromElements(
    <Route >
      <Route index path="/" element={<HomePage />} />
      <Route path="about-me" element={<AboutMe />} />
    </Route>
  )
)

function App() {
  return (
    <RouterProvider router={router} />
  )
}

export default App;

But when I try to add the corresponding links as below, I get an error that reads

TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

App.js

import React from "react";
import AboutMe from "./AboutMe";
import HomePage from "./Homepage";
import { 
  createBrowserRouter, 
  createRoutesFromElements, 
  Route, 
  RouterProvider,
  Link
} from 'react-router-dom';


// router and routes
const router = createBrowserRouter(
  
  createRoutesFromElements(
    <Route >
      <Route index path="/" element={<HomePage />} />
      <Route path="about-me" element={<AboutMe />} />
    </Route>
  )
)

function App() {
  return (
    <div>
      <nav className="nam">
        <Link to="/" className="nav-item">Home</Link>
        <Link to="/about-me" className="nav-item">About Me</Link>
      </nav>

        <RouterProvider router={router} />
    </div>
  )
}

export default App;

What am I doing wrong?

You probably need to wrap the Route provider around the app component.

function App() {
  return (
<RouterProvider router={router}>
    <div>
      <nav className="nam">
        <Link to="/" className="nav-item">Home</Link>
        <Link to="/about-me" className="nav-item">About Me</Link>
      </nav> 
    </div>
</RouterProvider>
  )
}

Please give it a shot.