I’m currently using react-router-dom v6 and I’m having trouble including a necessary component within the Router component as I’m not using BrowserRouter but using RouterProvider with createBrowserRouter.

import React from 'react'

// prettier-ignore
... Imports

const routes = createRoutesFromElements(
  <Route path='/' element={<RootLayout />}>
    <Route path='*' element={<NotFound />} />
    <Route index element={<Landing />} />
    <Route path='auth' element={<Auth />} />
    <Route path='ideate' element={<IdeatorLayout />}>
      <Route path=':sessionID' element={<Display />} />
    </Route>
    <Route path='privacy' element={<Privacy />} />
  </Route>
)

const router = createBrowserRouter(routes)

export const App: React.FunctionComponent = () => {
  useAuthControl()

  return (
    <RouterProvider router={router}>
      <ScrollToTop />
    </RouterProvider>
  )
}

Right now, I’m having an error including the ScrollToTop component within RouterProvider because I don’t think RouterProvider takes in children props. I tried looking at documentations but I can’t find the right way of doing this. My ScrollToTop component uses useHistory to check whenever the pathname has changed, and automatically scrolls to the top, so I have to include it within the router.

Thanks for the help in advance!