How to implement separate routing for sidebar in react router v6.4

Question

I would like to use new React router loader features, but I cannot figure out how to convert it in my application.

I used Route in multiple components but since new ReactProvider needs whole tree of routes in prop I don't know how to solve it.

So far I use v6 BrowserRouter with nested routes rendering Layout on the top level.

<BrowserRouter>
  <Routes> 
    <Route element={<Layout />}> 
      <Route index element={<Dashboard />} />
      <Route path="section-a/part1" element={<SomePage />} />
      <Route path="section-a/part2" element={<AnotherPage />} />
      <Route path="section-b" element={<DifferentPage />} /> 
    </Route> 
  </Routes>
</BrowserRouter>

In Layout I render SideBar which have static part which I want to appear at all times and don't want it to rerender when changing route, and dynamic part which have it's own routing and behavior when changing route.

const Layout = () => (
  <>
    <AppBar/>
    <SideBar>
      <StaticNavigation/>
      <DynamicSubnavigation /> 
    </SideBar>
    <Outlet/>
  </>
);

const DynamicSubnavigation = () => (
  <Routes>
    <Route element={<Layout />}>
      <Route index element={<DashboardSideBar />} />
      <Route path="section-a" element={<SectionASideBar />} />
      <Route path="section-b" element={<SectionBSideBar />} />      
    </Route>
  </Routes>
);

I don't see how I can implement this using new RouterProvider and createBrowserRouter. In docs they say that we need only one router but since it is passed as prop to ReactProvider it doesn´t help me. Only solution I see is to rerender whole SideBar and add it to nested routes, but I really don't wanna do that. Rerendering of the static part of the SideBar would cause me different problems.