react router 6 always shows parent component - nested routes

This is my routes:

      <Route path="supports" element={<SupportPage />}>
        <Route path=":id" element={<SupportDetailPage />} />
      </Route>

but when I enter this url:

..../supports

it show SupportPage that is ok but when I enter this url:

..../supports/8

but it shows SupportPage instead of SupportDetailPage.