How can you use multiple outlets in react-router 6?

Question

For example, say I have a Header and Content sub components that I would like to render on 1 page (single route path).

const App = () => {
  <div>
    <header><Outlet /></header>
    <content><Outlet /><content>
  </div>
}

const RouteConfig = () => {
  return (
    <Routes>
      <Route path="/" element={<App />} />
        <Route path="/app" element={<Header />} />
        <Route path="/app" element={<Content /> />
      </Route>
    </Routes>
  )
}

The above outputs the header contents for both Outlets, instead of the header and the contents. Is there a way to have multipe outlets?