The best way is to handle the role is App.js File because all your route are there and then you can specifiy which route should be avalible according to thier roles.like this example:

// App.js 
function App() {
const [addUserManagment, setAddUserManagment] = useState({
   render: false,
   type: "",
});
useEffect(() => {
   const space = localStorage.getItem("space");
   if (space === "c" || space === "a") {
   setAddUserManagment({
      render: true,
      type: space,
   });
  }
}, []);
  return (
<div className="App">
  <Routes>
    <Route path="/">
      <Route index element={<Login />} />
      <Route path="forget-password" element={<ForgetPassword />} />
      <Route path="reset-password/:token" element={<RestPassword />} />
      <Route
        path="register/:campanyName/:companyId"
        element={<InviteRegister />}
      />
    </Route>
          <Route path="profile" element={<Profile />} />
      {addUserManagment.render && (
        <Route path="setting" element={<Setting />} />
      )}
      {addUserManagment.render && (
        <Route
          path="user-management"
          element={
            addUserManagment.type === "c" ? <UserList /> : <UserListAdmin />
          }
        />
      )}
    </Route>
   </Routes>
  )
}

Now settign and user-managment are rendered if type of user equal to c or a.