A <Route> component with a children prop is rendered based on its position in the list of routes. For example, if the previous <Route> component is specified as the last entry in the list of routes, then it is rendered after all the preceding matching routes have been rendered. Also, if the previous <Route> component is listed before the matching route, then the route's content is rendered before rendering the matching route's content, as seen here:

<Route
    path="/sidenav"
    children={() => (
        <div> Inside Sidenav route </div>
    )}
/>

<Route
    path="/user"
    render={() => (
        <div> Inside User route </div>
    )}
/>

Here, when you try to access the '/user' path, the <Route> component with a children prop is rendered before rendering the route with the '/user' path.