Why does React BrowserRouter not return each component based on URL as it should?

Question

I'm fairly new to React and am trying to get the BrowserRouter to render properly. However, when this renders:

ReactDOM.render(
  <ApolloProvider client={client}>
    
    <Router>
      <Routes>
        <Route element={<Nav />} />
        <Route path="/" element={<Search />}>
            <Route path="search" element={<Content />} />
        </Route>
      </Routes>
    </Router>
  </ApolloProvider>,
  document.getElementById('root')
)

All that shows up on the page is the Search bar, regardless of whether I'm at the index or at /search. I would like the Nav and Search elements to show up on all pages, and for any nested component to appear only at its specified route (e.g. /search for Content) I imported BrowserRouter as Router. Any help is greatly appreciated!