How to create separate route exluding header/footer in react-router dom?

Question

I'd like to include a health-check page to my react application. I have created the heal-check page but not sure how do I create the route for it in this file below.

import React from 'react'
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'

// Components
import ConfirmModal from 'components/ConfirmModal'
import PrivateRoute from 'components/PrivateRoute'
import Notifications from 'components/Notifications'
import SessionMonitor from 'components/SessionMonitor'
import PageLeaveModal from 'components/PageLeaveModal'

// Routes
import Login from 'routes/Login'
import HealthCheck from 'routes/HealthCheck'
import Slider from 'routes/Slider'
import Reports from 'routes/Reports'
import RedirectToApp from 'routes/RedirectToApp'
import WeeklyCalendar from 'routes/WeeklyCalendar'
import ReturnExpectationsChart from 'routes/ReturnExpectationsChart'
import CommentariesList from './Builder/components/CommentariesList'
import Builder, { Categories, CommentaryEdit, CommentaryNew } from 'routes/Builder'

import { MainLayout } from 'layouts'

const Root = ({ history }) => {
  return (
    <BrowserRouter basename="/" history={history}>
      <MainLayout pathname={history.location.pathname}>//contains header & footer
        <Routes>
          <Route path="login" element={<Login />} />
          <Route path="app/reports/*" element={<PrivateRoute component={Reports} />} />
          <Route path="app/builder" element={<PrivateRoute component={Builder} />}>
            <Route path="" element={<Navigate to="categories" replace />} />
            <Route path="categories" element={<PrivateRoute component={Categories} />} />
            <Route path="categories/:reportingCategoryId" element={<PrivateRoute component={CommentariesList} />} />
            <Route path="commentaries/new" element={<PrivateRoute component={CommentaryNew} />} />
            <Route path="commentaries/:commentaryId" element={<PrivateRoute component={CommentaryEdit} />} />
            <Route path="slider" element={<PrivateRoute component={Slider} />} />
            <Route path="uwec" element={<PrivateRoute component={WeeklyCalendar} />} />
            <Route path="return-expectations-chart" element={<PrivateRoute component={ReturnExpectationsChart} />} />
          </Route>
          <Route path="*" element={<RedirectToApp />} />
        </Routes>
      </MainLayout>

      <>
        <ConfirmModal />
        <SessionMonitor />
        <Notifications />
        <PageLeaveModal />
      </>
    </BrowserRouter>
  )
}

export default Root

If I put the health-check route like this below, outside the main layout in a new Routes wrapper I can't get it to work and just redirects me back to login page when I access the health-check page.

  return (
<BrowserRouter basename="/" history={history}>
  <MainLayout pathname={history.location.pathname}>
    <Routes>
      <Route path="login" element={<Login />} />
      <Route path="app/reports/*" element={<PrivateRoute component={Reports} />} />
      <Route path="app/builder" element={<PrivateRoute component={Builder} />}>
        <Route path="" element={<Navigate to="categories" replace />} />
        <Route path="categories" element={<PrivateRoute component={Categories} />} />
        <Route path="categories/:reportingCategoryId" element={<PrivateRoute component={CommentariesList} />} />
        <Route path="commentaries/new" element={<PrivateRoute component={CommentaryNew} />} />
        <Route path="commentaries/:commentaryId" element={<PrivateRoute component={CommentaryEdit} />} />
        <Route path="slider" element={<PrivateRoute component={Slider} />} />
        <Route path="uwec" element={<PrivateRoute component={WeeklyCalendar} />} />
        <Route path="return-expectations-chart" element={<PrivateRoute component={ReturnExpectationsChart} />} />
      </Route>
      <Route path="*" element={<RedirectToApp />} />
    </Routes>
  </MainLayout>
  <Routes>
    <Route path="health-check" element={<HealthCheck/>} />// I put the healthcheck here
  </Routes>

  <>
    <ConfirmModal />
    <SessionMonitor />
    <Notifications />
    <PageLeaveModal />
  </>
</BrowserRouter>

)

If I also move the mainlayout wrapper like this code below to just wrap the pages that it needs to, I will get an error that Routes can only have route component

   <BrowserRouter basename="/" history={history}>
    <Routes>
    <MainLayout pathname={history.location.pathname}>
      <Route path="login" element={<Login />} />
      <Route path="app/reports/*" element={<PrivateRoute component={Reports} />} />
      <Route path="app/builder" element={<PrivateRoute component={Builder} />}>
        <Route path="" element={<Navigate to="categories" replace />} />
        <Route path="categories" element={<PrivateRoute component={Categories} />} />
        <Route path="categories/:reportingCategoryId" element={<PrivateRoute component={CommentariesList} />} />
        <Route path="commentaries/new" element={<PrivateRoute component={CommentaryNew} />} />
        <Route path="commentaries/:commentaryId" element={<PrivateRoute component={CommentaryEdit} />} />
        <Route path="slider" element={<PrivateRoute component={Slider} />} />
        <Route path="uwec" element={<PrivateRoute component={WeeklyCalendar} />} />
        <Route path="return-expectations-chart" element={<PrivateRoute component={ReturnExpectationsChart} />} />
      </Route>
      <Route path="*" element={<RedirectToApp />} />
      </MainLayout>
      <Route path="health-check" element={<HealthCheck/>} />// healthcheck is outside mainlayout wrapper
    </Routes>

Not really sure what other ways I can try anymore. Can anyone help me please how to implement the healthcheck page in my routes? I'm still new to react and routers. Thank you