how to create nested router using useNavigate

Question

Hello to all dear friends I have a program that, as soon as the system is loaded, the user logs in, and if the login conditions are correct, it enters the next step, which has several menus. It means that at first, he does not see any menu, and after logging in, he sees several menus, and he clicks on them to enter the same section. I did it with Router, useNavigate and I used nested Router as in the picture But when I go to the menus, as soon as I show the corresponding com\onnet, it returns to the root part of the menus. I took the codes and photos Does anyone know what the problem is?

App.js

    import React, { useEffect, useState } from "react";
import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
import "./App.css";
import Container from "./container/Container";
import Router from "./components/clinic/router/Router";
import Message from "./components/clinic/pages/message/Message";
import Mytasks from "./components/clinic/pages/mytasks/Mytasks";
import Members from "./components/clinic/pages/members/Members";
import Calendar from "./components/clinic/pages/calendar/Calendar";

function App() {
  const [IsLoggedIn, setIsLoggedIn] = useState(false);
  const navigate = useNavigate();
  useEffect(() => {
    if (!IsLoggedIn) {
      navigate("/");
    } else {
      navigate("clinic");
    }
  }, [navigate, IsLoggedIn]);
  return (
    <React.Fragment>
      <Routes>
        <Route path="/" element={<Container setIsLoggedIn={setIsLoggedIn} />} />
        <Route path="/clinic" element={<Router />}>
          <Route index element={<Message />} />
          <Route path="mytasks" element={<Mytasks />} />
          <Route path="members" element={<Members />} />
          <Route path="calendar" element={<Calendar />} />
          <Route path="*" element={<Navigate to="/" />} />
        </Route>
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </React.Fragment>
  );
}

export default App;

and Router.jsx

<Link to="/clinic">Message</Link>
      <Link to="/clinic/mytasks/"> My Tasks </Link>
      <Link to="/clinic/members"> Members </Link>
      <Link to="/clinic/calendar"> Calendar </Link>
      <Outlet />