How can I exactly match routes nested deeply in react router 6?

Question

How can I match the full route with path "users/:id/settings" but at the same time render only the component in each path:

• /users -> only renders a list of users
• /users/:id -> only renders the user profile
• /users/:id/settings -> only renders the user settings.

     <Route path="users" element={<h2>LIST PROJECTS</h2>}>
       <Route path=":id" element={<h2>PROJECT id</h2>}>
          <Route path="settings" element={<h2>PROJECT SETTINGS</h2>} />
        </Route>
     </Route> 

Answer 1

import React from "react";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
<BrowserRouter>
      <Navigation />
      <Switch>
        <Route
          exact
          path="/"
          component={Home}
          
        />
        <Route exact path="/user" component={User} />
        <Route
          exact
          path="/user/:id/setting"
          render={(props) => {
            return <Your Component {...props} />;
          }}
        />
       
      </Switch>
    </BrowserRouter>

//in your component // AllProduct is from database or the items you want to match import it 1st

let component = (props) => {
  let compo= props.location.state;
//if state is undefined can be access with params
if (!compo) {
const id = props.match.params.id;
compo = AllProduct.find((items) => items.id == id);

}