Routing in React App renders extra components on page

Let me start by disclosing that this is part of the capstone project for a React course I am taking in Coursera. I am not interested in the answer per se. I just want someone to tell me what is wrong and why. If later on I cannot figure it out, I will edit this question with what I did to attempt to fix the issue based on the feedback I received. For now, all I need is someone to point me in the right direction.

Right now, the home page renders correctly, as far as I can tell, because haven’t defined the routing. When I try to set the routing to the home page, the same issue shown in the picture below occurs. What I want is to set the routing so that when I go to a page, only the contents of that page is shown and nothing else. Right now it seems like, no matter what I do, the contents of the App component gets mixed up with whichever page I navigate to. When I navigate to the home page, it seems the contents of the app doubles. The picture below is an example of what the BookingPage looks like when I click on "Reservations" link. When the Route is not defined, it appears as if the contents of the App component renders normally.

import { Routes, Route, Link } from "react-router-dom";
import BookingPage from "./BookinPage";
import AboutUs from "./AboutUs";
import Menu from "./Menu";

function Nav () {
  return(
    <div>
      <nav>
        <ul>
          <li><Link to="/" className="link">Home</Link></li>
          <li><Link to="/about" className="link">About</Link></li>
          <li><Link to="/menu" className="link">Menu</Link></li>
          <li><Link to="/booking" className="link">Reservations</Link></li>
          <li><Link to="/" className="link">Order Online</Link></li>
          <li><Link to="/" className="link">Login</Link></li>
        </ul> 
      </nav>
      <Routes> 
        <Route path="/menu" element={<Menu />} />
        <Route path="/booking" element={<BookingPage />} />
      </Routes>
    </div>
  );
}

export default Nav;

import './App.css';
import Header from './Header';
import Main from './Main';
import Nav from './Nav';
import "@fontsource/karla"
import "@fontsource/markazi-text";


function App() {
  return (
    <>
      <div className="banner">
        <Header />
        <Nav />
      </div>
      <Main />
    </>
  );
}

export default App;

The Header component contains the logo and the Main component contains the different sections of the home page. Here are the code for those two components:

import logo from './assets/images/little_lemon_logo(sm).jpg'

function Header () {
  return (
    <header>
      <meta name="description" content="The Little Lemon restaurant website"/>
      <meta name="og:title" content="Little Lemon"/>
      <meta name="og:image" content="https://unsplash.com/photos/focus-photography-of-pumpkin-V1dae2Jj6-0"/>
      <img src={logo} alt="Little Lemon's logo" />
    </header>
  );
}

export default Header;

import Hero from "./Hero";
import Homepage from "./Homepage";
import Testimonials from "./Testimonials";
import AboutUs from "./AboutUs";
import Footer from "./Footer";

function Main () {
  return (
    <>
      <Homepage />
      <Hero />
      <Testimonials />
      <AboutUs />
      <Footer />
    </>
  );
}

export default Main;

Also, rather than posting all the code, I will add the link to the project location in GitHub: Little Lemon capstone project

You need to sign in to view this answers