The following code (codesandbox) produces this warning when the root url is navigated to:

You rendered descendant (or called useRoutes()) at "/" (under <Route path="">) but the parent route path has no trailing "*"...

However, no warning is issued if I navigate to "/post/blah".

import { Routes, Route} from "react-router-dom";



const StreamPage = () => (
  <>
        <Routes>
            <Route index element={<div /> } />
            <Route path="post/:subslug/*" element={<div /> }/>
        </Routes>

      <Routes>
        <Route index element={<div />} />
        <Route path="post/:subslug/*" element={<div />} />
      </Routes>
  </>
)


export const App = () => (
      <Routes>
        <Route path="/" >
          <Route path="post/*" element={<StreamPage  />} />
          <Route index element={<StreamPage />} />
        </Route>
      </Routes>
  )

I know, I could fix the code by merging the two Routes blocks in StreamPage but I'm asking if this is expected behavior and if so what part of the react-router usage contract/API I'm violating? For instance, am I not allowed to have don't have sibling index routes under an index route? If I don't understand when/why this warning is produced I won't be able to avoid it in the future.

(related to this earlier question)