navigate resource with different roles

<Route
                element={
                    <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                        <ThemedLayoutV2
                            Header={() => <Header sticky />}
                            Sider={(props) => <ThemedSiderV2 {...props} fixed />}
                            Title={({ collapsed }) => (
                                <ThemedTitleV2
                                    collapsed={collapsed}
                                    text="DF Smart Banking 2023"
                                />
                            )}
                        >
                            <CanAccess>
                                <Outlet />
                            </CanAccess>
                        </ThemedLayoutV2>
                    </Authenticated>
                }
            >
<Route path="admin"></Route>
<Route path="user"></Route>
</Route>

<Route
                element={
                    <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                        <ThemedLayoutV2
                            Header={() => <Header sticky />}
                            Sider={(props) => <ThemedSiderV2 {...props} fixed />}
                            Title={({ collapsed }) => (
                                <ThemedTitleV2
                                    collapsed={collapsed}
                                    text="DF Smart Banking 2023"
                                />
                            )}
                        >
                            <CanAccess>
                                <Outlet />
                            </CanAccess>
                        </ThemedLayoutV2>
                    </Authenticated>
                }
            >
<Route path="admin"></Route>
<Route path="user"></Route>
</Route>

  accessControlProvider={{
              can: async ({ resource, action }) => {
                let can = false;
                const role = getUserRole();

                if (role !== undefined && resource) {
                  switch (role) {
                    case Role.user:
                      can = resource.startsWith('user/');
                      break;
                    case Role.admin:
                      can = resource.startsWith('admin/');
                      break;
                    default:
                      console.log("Unknown Role");
                      break;
                  }
                }

                return Promise.resolve({ can });
              },
            }}

  accessControlProvider={{
              can: async ({ resource, action }) => {
                let can = false;
                const role = getUserRole();

                if (role !== undefined && resource) {
                  switch (role) {
                    case Role.user:
                      can = resource.startsWith('user/');
                      break;
                    case Role.admin:
                      can = resource.startsWith('admin/');
                      break;
                    default:
                      console.log("Unknown Role");
                      break;
                  }
                }

                return Promise.resolve({ can });
              },
            }}