Which path do I need to put for index route to switch on parent route

The main idea uses path to go from index route to parent route in nested route. So I'd like to see a path. link="." is not good because I just go back but I need use path

I'd like that when I click on MenuItem(NavLink) then I will switch to parent route but now
I click on

<MenuItem link={`./profile/${userId}`}>Profile info</MenuItem>

and my path equal http://localhost:3000/profile/62e96087d8d815f327dc5125/profile/62e96087d8d815f327dc5125

but I need just http://localhost:3000/profile/62e96087d8d815f327dc5125

I have a route

 <Routes>
  <Route path={pageRoutes.HOME} element={<LayoutPage />}>
    <Route index element={<HomePage />} />
    <Route element={<ProtectedPage />}>
      <Route path={pageRoutes.PROFILE} element={<LayoutProfilePage />}>
        <Route index element={<ProfileInfo />} />
        <Route
          path={pageRoutes.EDIT_PANEL}
          element={<EditProfilePanel />}
        />
        <Route path={pageRoutes.ADMIN_PANEL} element={<AdminPanel />} />
        <Route path={pageRoutes.CART} element={<CartPage />} />
      </Route>
      <Route path={pageRoutes.PRODUCT} element={<ProductPage />} />
      <Route path={pageRoutes.ADMIN} element={<AdminPage />} />
    </Route>
    <Route path={pageRoutes.ABOUT} element={<AboutPage />} />
  </Route>
  <Route path={pageRoutes.NOT_FOUND} element={<NotFoundPage />} />
</Routes>

In <LayoutProfilePage /> component I have

const LayoutProfilePage = () => {
           return (
             <ProfilePageStyled>
               <Breadcrumbs />
               <ProfileMenu />
               <Outlet />
             </ProfilePageStyled>
       );
     };

and in <ProfileMenu> I have

const ProfileMenu = () => {
 const userId = useSelector(userIdSelector);
 return (
<ProfileMenuStyled>
    // which path do I need to put in link that I will switch to this path pageRoutes.PROFILE
  <MenuItem link={`./profile/${userId}`}>Profile info</MenuItem>
  <MenuList>
    {userProfileRoutes.map(({ id, path, name, icon }) => (
      <MenuItem key={id} link={path} icon={icon}>
        {name}
      </MenuItem>
    ))}
  </MenuList>
</ProfileMenuStyled>
 );
};

and my routes:

enum pageRoutes {
  HOME = "/",
  PROFILE = "profile/:userId",
  EDIT_PANEL = "editPanel",
  ADMIN_PANEL = "adminPanel",
  CART = "cart",
  PRODUCT = "product",
  ABOUT = "about",
  ADMIN = "admin",
  NOT_FOUND = "*",
}