I am upgrading a React app to use react-router-dom v6 ( previously using v5 ). There is one part of the app that uses a wrapper component to determine the route and I do not seem to be able to get this to work.

<Routes>
    //routes
    <Route path=":carId" element={<RouteWrapper path="/car-options/select" element= 
             {CarSelection} IsAvailable={isAvailable} LastSalesDate={lastSalesDate} />
    //routes
</Routes>

The code in the RouteWrapper component will evaluate the prop values and return a element..

//inside RouteWrapper
//if not available 
return <Routes><Route path="\notavailable" element={<NotAvailable\>}/><Routes>

//if last sales date is null
return <Routes><Route path="\inventoryList" element={<InventoryList/>}/></Routes>

//else
return <Routes><Route path="\carselector" element={<CarSelection/>}/></Routes>

I have tried numerous ways of writing this, far too many to list, and do not seem to be able to get this to work. Is there some accepted pattern for moving this type of route inquiry to v6? I don’t seem to be able to find a clear example of this in my search results.