Issue with useNavigate() Hook in Custom React-Admin Application

I’m facing a challenging issue in my React-Admin application. When I try to use the useNavigate() hook within my custom login component (MyLoginPage), I’m getting the following error:

Error: useNavigate() may be used only in the context of a <Router> component.

Problematic Behavior:
The error occurs exclusively within MyLoginPage, which is set as the loginPage prop in the <Admin> component of React-Admin, suggesting it should inherently have routing context.

Setup:

Shell Component: Acts as a wrapper around React-Admin’s <Admin> for Firebase auth state handling.
MyLoginPage component: Custom login component using useNavigate() for post-login redirects.
Here’s a snippet from MyLoginPage where useNavigate() is invoked:

MyLoginPage component

import { useNavigate } from "react-router-dom";
// ... other imports

const MyLoginPage = () => {
  const navigate = useNavigate(); // this line triggers the error
  // ... rest of the component
};

And here’s how MyLoginPage is used within the app structure:

App component

import { Admin } from "react-admin";
import MyLoginPage from "./MyLoginPage";
import { Shell } from "./Shell";

const App = () => {
  return (
    <Shell>
      <Admin loginPage={MyLoginPage} /* ... other props ... */>
        {/* ... resources ... */}
      </Admin>
    </Shell>
  );
};

Attempts to Resolve:

• Ensured MyLoginPage is rendered as a child of <Admin>.
• Checked for additional <Router> instances that might conflict with React-Admin’s router context.

I’m stumped as to why useNavigate() is losing context within MyLoginPage. Could this be an issue with the order in which components are mounted? Any advice or insights would be greatly appreciated!