I'm trying to add a NavBar to the app.js file I have in react. When I load the page the Route files are loading but the Link files set in NavBar aren't appearing.

This is the NavBar page

import React from 'react';
import { Link } from 'react-router-dom';

const NavBar = () => ( 
        <nav>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
                <li>
                    <Link to="/article">Article</Link>
                </li>
                <li>
                    <Link to="/article-list">Article List</Link>
                </li>
            </ul>
        </nav>
)

export default NavBar;

Then below is the app.js file

import Homepage from './Pages/Homepage';
import AboutPage from './Pages/AboutPage';
import ArticlesList from './Pages/ArticlesList';
import ArticlePage from './Pages/ArticlePage';
import NavBar from './NavBar';
import {Routes, Route} from 'react-router-dom';

import './App.css';

function App() {
  return (
    <Routes>
      <div className="App">
        <NavBar />
        <div id="page-body">
          <Route path="/" element={<Homepage />} />
          <Route path="/about" element={<AboutPage />}/>
          <Route path="/article-list" element={<ArticlesList />} />
          <Route path="/article" element={<ArticlePage />} />
      </div>
    </div>
    </Routes>
  );
}

export default App;

I am keeping NavBar out of the pages folder I'm stumped as to what it could be

Just incase the react-router-dom version I have in my package.json file is:

    "react-router-dom": "^6.0.0-beta.6",

index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from "react-router-dom";
import './index.css';
import App from './App';


ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);