[Bug]: Authenticated Routes white screen

[alphonso06]

What version of React Router are you using?

6.2.1

Steps to Reproduce

I had a previously functional piece of code that suddenly stopped working after the recent version, so I checked what was going on. I followed some examples from this thread.

App.jsx

function App() {
   return (
     <Grommet background='light-1' theme={ power } full>
      <BrowserRouter>
        <DashboardTemplate>
          <Routes>
            <Route element={ <RequirePublic /> }>
              <Route path='/' element={ <Login /> } />
            </Route>
            <Route element={ <RequireAuth /> }>
              <Route path='/promos' element={ <Promos /> } />
              <Route path='/catalogs' element={ <Catalogs /> } />
              <Route path='/products' element={ <Products /> } />
              <Route path='/categories' element={ <Categories /> } />
            </Route>
            <Route path='*' element={ <PageNotFound /> } />
          </Routes>
        </DashboardTemplate>
      </BrowserRouter>
    </Grommet>
   )
}

ProtectedRoutes.jsx

import { useAtom } from 'jotai'
import { Outlet } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import { Navigate } from 'react-router-dom'
import { userAtom } from '../../atoms/user'

export function RequireAuth() {
    const [currentUser] = useAtom(userAtom)
    let location = useLocation()

    if (!currentUser) {
        return <Navigate to="/" state={{ from: location }} />
    }

    return <Outlet />
}

export function RequirePublic() {
    const [currentUser] = useAtom(userAtom)
    let location = useLocation()

    if (currentUser) {
        return <Navigate to="/dashboard/promos" state={{ from: location }} />
    }

    return <Outlet />
}

Expected Behavior

Not white screen.

Actual Behavior

Blank white screen with no compile errors.

It's also giving me this in the console. Don't know what to do with it either.