Why are empty routes needed for this React Router code to work?

Using React (and React Router) I am creating a navigation menu inside of another navigation menu. I created exactly what I am looking for but I don’t understand part of the code and I want some clarity. The code I don’t understand is commented with: “why is this needed”.

As an experiment, I asked chat gpt to rewrite my code and it did so with the commented code removed, but that version does not work.

The code below works because it lets me select the LINK named Topology and this renders a component named Topology. Inside the rendered component are three additional links , when each of these are clicked a corresponding component is rendered.

I attached a little video of me clicking the links and the routes changing (for some reason the video didn’t capture my mouse cursor but the links I click are reflected in the URL change)

Video of render

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



function WorkSpace({children}){
  return(
    <div >
    <div>{children}</div>
    <h1>WORKSPACE</h1>
     </div>

  )
}

function Topology(){
  return(  
  
    <div  >

     <nav >
     <Link to="topology" >Topology</Link>
     <br/>
     <Link to="packet-broker"  >Packet Broker</Link>
     <br/>
     <Link to="slice" >Slice</Link>
    </nav>
    <h1>Topology</h1>

    <Routes>
      <Route path="topology" element={<h1>TOPOLOGY WINDOW</h1>}/> 
      <Route path="slice" element={<h1>SLICE WINDOW</h1>} /> 
      <Route path="packet-broker" element={<h1>Packet Broker WINDOW</h1>} /> 
    </Routes>

 
    </div>
  )
}


function MiniTabsRenderSpace(){

  return (
    <div>
    <Routes>
      <Route path="topology" element={<Topology />}> 
        <Route path="topology" element={<></>} />         // <--Why is this needed?
        <Route path="slice" element={<></>} />            // <--Why is this needed?
        <Route path="packet-broker" element={<></>} />    // <--Why is this needed? 
      </Route>
    </Routes>

    </div>
  );

}



function Nav() {
  return (
    <nav>
      <ul>
      <Link to="/topology">Topology</Link>
      <br/>
      <Link to="/another-link-1">Another Link-1</Link>
      <br/>
      <Link to="/another-link-2">Another Link-2</Link>
      </ul>
    </nav>
  );
}


function App() {
  return (

      <div>
        
          <Nav/>
          <WorkSpace>
          <MiniTabsRenderSpace/>
          </WorkSpace>
        
  
      </div>
  
  );
}

export default App;