React.js Provider- Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly

Question

I am trying to move my React.js app to version 18. I have put my BrowserRouter component into a <Provider>, as shown below:

const root = createRoot(document.getElementById('root'))
const router = (
<Provider store={store}>
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<MainComponent />} />
      <Route path="/about" element={<AboutComponent />} />
      <Route path="/account/appeal" element={<AppealComponent />} />
      <Route path="/account/login" element={<LoginComponent />} />
      <Route path="/account/register" element={<RegisterComponent />} />
      <Route path="/admin-dashboard" element={<AdminDashboardComponent />} />
      <Route path="/app" element={<AppComponent />} />
      <Route path="/blog/latest-posts" element={<ViewBlogPostsComponent />} />
      <Route path="/blog/post" element={<BlogPostComponent />} />
      <Route path="/contact" element={<ContactComponent />} />
      <Route path="/download" element={<DownloadComponent />} />
      <Route path="/forum/categories" element={<ViewForumCategoriesComponent />} />
      <Route path="/store" element={<StorePage />} />
      <Route path="/submissions" element={<SubmissionsPage />} />
      <Route path="/submissions/view-submission" element={<SubmissionDetailsPage />}/>
      <Route path="/submissions/edit" element={<EditSubmissionComponent />} />
      <Route path="/policies/acceptable-use-policy" element={<AcceptableUsePolicyComponent />} />     
      <Route path="/policies/code-of-conduct" element={<CodeOfConductComponent />} />
      <Route path="/policies/cookie-policy" element={<CookiePolicyComponent />} />
      <Route path="/policies/copyright-policy" element={<DMCAPolicyComponent />} />
      <Route path="/policies/privacy-policy" element={<PrivacyPolicyComponent />} />
      <Route path="/policies/terms-and-conditions" element={<TermsAndConditionsComponent />} />
      <Route path="/profile" element={<ProfilePageComponent />} />
      <Route path="/wiki" element={<ViewWikiPageComponent />} />
      <Route path="*" element={<Error404Component />} />
    </Routes> 
  </BrowserRouter>
</Provider>
);

However, my app crashes and the following error message is visible in the console:

router.ts:5 Uncaught Error: A <Route> is only ever to be used as the child of <Routes> 
element, never rendered directly. Please wrap your <Route> in a <Routes>.
    at invariant (router.ts:5:1)
    at Route (components.tsx:147:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)

Can you please help me with this? I need the Provider for checking if a user is logged in, so I can't just remove the <Provider>.