React Routes not correctly rendering components

Question

I have a very simple react app going right now. I am trying to add a static navigation bar that renders different components when links are clicked. The routes are set up in the App.jsx component, and all the links are within the Navigation.jsx component. When I click the links, the url changes but does not render any component. If I change the closing Navigation route tag to not wrap all of my routes, it works, but does not render the nav bar each component.

I would like to have the navbar constantly rendered, and the components change with each link click.

This is my App component right now.

function App() {
  return (
    <div>
      <Routes>
        <Route path='/' element={<Navigation />} >
          <Route index element={<Home />} />
          <Route path='projects' element={<Projects />} />
          <Route path='resume' element={<Resume />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

And this is my Navigation

export default function Navigation() {
  const [burgerClass, setBurgerClass] = useState('burger-bar unclicked');
  const [menuClass, setMenuClass] = useState('menu hidden');
  const [isMenuClicked, setIsMenuClicked] = useState(false);

  const updateMenu = () => {
    if (!isMenuClicked) {
      setBurgerClass('burger-bar clicked');
      setMenuClass('menu visable');
    } else {
      setBurgerClass('burger-bar unclicked');
      setMenuClass('menu hidden');
    }
    setIsMenuClicked(!isMenuClicked);
  }

  return (
    <div className='navigation'>
      <nav>
        <div className='burger-menu' onClick={updateMenu}>
          <div className={burgerClass}></div>
          <div className={burgerClass}></div>
          <div className={burgerClass}></div>
        </div>
        <Link className='logo-container' to='/'>
          <h1>JESSE GOODRUM</h1>
        </Link>
        
        <div className='social-media-links-container'>
          <a href='http://www.linkedin.com/in/jessegoodrum/'>
            <i className="fa-brands fa-linkedin"></i>
          </a>
          <a href='https://github.com/jessegoodrum/'>
            <i className="fa-brands fa-github"></i>
          </a>
        </div>  
      </nav>

      <div className={menuClass}>
        <ul>
          <li>
            <Link className='nav-link' to ='/projects'>PROJECTS</Link>
          </li>
          <li>
            <Link className='nav-link' to='/resume'>RESUME</Link>
          </li>
        </ul>
      </div>
    </div>
  )
}