How to render additional DOM with RouterProvider in react-router-dom V6

Question

It sounds very simple, but I couldn't figure it out. I recently started using react-router-dom v6. And this is how my index file looks like:

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
const router = createBrowserRouter([ 
  {
    path: '/',
    element: <Dashboard />
  },
  {
    path: '/dashboard',
    element: <Dashboard />
  },
  {
    path: '/tasks',
    element: <Dashboard />
  },
  {
    path: '/jobs',
    element: <Dashboard />
  },
  {
    path: '/edit-resume',
    element: <Dashboard />
  }
])

root.render(
  <React.StrictMode>
    <div className="w-full h-full bg-mirage-950 text-white font-light">
      <Header />
      <div className="flex w-full">
        <Sidebar />
        <div className="px-7 py-4 pl-[230px]">
          <RouterProvider router={router} />
        </div>
      </div>
    </div>
  </React.StrictMode>
);

Now the problem is I want to use Link component in my Sidebar component so the user can navigate to a different route. But I can't use Link there, as it's not inside the RouterProvider. I want to render the route element in px-7 div, but I'm not sure how do I provide the target element to react-router-dom.

One simple solution could be to wrap the whole markup in RouterProvider and then pass children where I want to render the route element component, but I'm not sure if that's possible.