import { FC } from "react";
  import { ToolbarWrapper } from "../../../../../_base/layout/components/toolbar";
  import { Content } from "../../../../../_base/layout/components/content";
  import { Routes, Route, Outlet } from "react-router-dom";
  import UserDetailsHeader from "./UserDetailsHeader";
  import UserDetailsOverview from "./UserDetailsOverview";
  import Loading from "../../../common/Loading";
  import UserActivity from "./UserActivity";
  import UserInsights from "./UserInsights";

  interface DrawerProps {
    data: Object,
  }

  const UserDetails: FC<DrawerProps> = ({ data }) =>{
    return (
      <div>
        <ToolbarWrapper />
        <div>
          <Content>
            <UserDetailsHeader user={data} />
            <Routes>
              <Route element={<Outlet />}>
                <Route path="/" element={<UserDetailsOverview user={data} />} />
                <Route path="/activity" element={<UserActivity />} />
                <Route path="/insights" element={<UserInsights />} />
              </Route>
            </Routes>
          </Content>
        </div>
      </div>
    );
  };

  export default UserDetails;

I am Importing UserDetails Component inside my drawer, and i am showing initially the ” ” and bottom of that i added three links for activity, overview and insights, but when i click on this then it open another page instead of opening inside drawer.

I tryied to write the routing functionality inside the drawer page, but its not work there.