How to nest element between content and router (react-router-dom v6)

import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom"

import About from "./About"
import FAQ from "./FaQ"
import Provider from "./contexts/Provider"

const router = createBrowserRouter([
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/faq",
    element: <FAQ />
  }
])

export default function Dashboard() {
  return (
    <>
      <RouterProvider router={router}/>
    </>
  )
}