useAuthenticator authStatus stuck on `configuring`, Amplify react-ui

Question

I am trying to fetch the auth status as in the route protection example, but seemed to always be redirected. Upon further debugging, I noticed that the route const was always set to idle, and so I tried to use authStatus instead (seemingly a better fit for this purpose anyway), eg.

  const { authStatus } = useAuthenticator((context) => [context.authStatus]);

Unfortunately, this also seems to always be set to configuring, which based on the documentation, this shouldn't be happening, and this state should only be reserved for first load.

I found this thread, but have been unable to implement the solution, as it is hiding all my login pages (below is an example of how I was trying it)

hideAuth.css

[data-amplify-authenticator] {
display:none;
}

RequireAuth.js

import { useLocation, Navigate } from 'react-router-dom';
import { useAuthenticator } from '@aws-amplify/ui-react';
import '../App.css';
import '../hideAuth.css';

export function RequireAuth({ children }) {
  const location = useLocation();
  const { authStatus } = useAuthenticator((context) => [context.authStatus]);
  if (authStatus !== 'authenticated') {
    return <Navigate to="/unauthenticated" state={{ from: location }} replace />;
  }
  return children;
}

App.js

.
.
.
function MyRoutes() {
  return (
    <BrowserRouter>
      <Routes>        
        <Route exact path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard" 
          element={
            <Authentication>     // I did not normally have this Authentication wrapper
              <RequireAuth>
                <Dashboard />
              </RequireAuth>
            </Authentication>    // It was added as suggested in the linked thread
          }
        />
        <Route path="*" element={<ErrorPage />} />
        <Route path="/unauthenticated" element={<Unauthenticated />} />
      </Routes>
    </BrowserRouter>
  );
}

function App() {
  return (
    <Authenticator.Provider>
      <MyRoutes />
    </Authenticator.Provider>
  );
}

export default App;

The answer in the thread above does suggest that there has been a solution using npm i @aws-amplify/react-ui@next, but trying this hasnt changed any behaviour I have been seeing - am I doing something wrong?