how to create nested router outlet for sidebar under navbar in Reactjs

Question

I want to create sticky sidebar for particular navItem, sidebar should not disapper when clicked on sidebarItems i.e sidebar should remain on the screen even after we navigate to sidebarItem
(https://i.stack.imgur.com/wySIz.png)(https://i.stack.imgur.com/s0HS3.png) In above image, clicking on introduction navigates to another page. I want rendered page beside sticky sidebar

I tried this in main.jsx

import Layout from "./Layout.jsx";
import Home from "./pages/Home.jsx";
import TreeBoard from "./pages/Tree/TreeBoard.jsx";
import GraphBoard from "./pages/GraphBoard.jsx";
import { ThemeProvider } from "@material-tailwind/react";
import TreeIntro from "./pages/Tree/TreeIntro.jsx";
import TreeLayout from "./pages/Tree/TreeLayout.jsx";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route path="/" element={<Home />} />
      <Route path="/tree" element={<TreeLayout/>} />        
        <Route path="/tree" element={<TreeBoard/>}/>
        <Route path="/tree/introduction" element={<TreeIntro/>}/>
      <Route path="graph/" element={<GraphBoard />} />
    </Route>
  )
);
ReactDOM.createRoot(document.getElementById("root")).render(
  <ThemeProvider>
    <RouterProvider router={router} />
  </ThemeProvider>
);

Layout.jsx for navbar

import Header from "./components/Header";
import Footer from "./components/Footer";
import { Outlet } from "react-router-dom";

function Layout() {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
}

export default Layout;

and this is TreeLayout for sidebar

import { MultiLevelSidebar } from "../../components/SideBar";
import { Outlet } from "react-router-dom";

export default function TreeLayout() {
  return (
    <>
      <MultiLevelSidebar />
      <Outlet />
    </>
  );
}

how to do such routing to get desired result?