Can we enable local authentication in a React SPA which already supports Azure AD login?

Question

I have a React SPA which authenticates users using msal-react. So far, the Azure AD authentication is working fine but now I need to enable local authentication. The flow will be somewhat like below:

1. User enters the login page url.
2. A form loads with email id and password fields, user enters the local authentication credentials.
3. User clicks on Sign In button, the application makes an API call to our custom token endpoint. If the credentials are valid, the user gets a token else they get a 401 error.

We don't want to completely depend on Azure AD for authentication hence we want to enable local authentication too. But I am completely lost because I am getting redirected to the Microsoft login page whenever I enter the Login page URL. Any guidance on how to go about this is appreciated!

I added the code for Local authentication in the component but I am getting redirected to the Microsoft login page. The expected behavior is that the login page should load fine without any redirection and user should be able to enter their credentials and login to the application.

This is what my App.tsx looks like.

<MsalProvider instance={pca}>
   <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
     <AuthenticatedTemplate>
       //All the Application Components with the routes
     </AuthenticatedTemplate>
     <UnauthenticatedTemplate>
       <Routers />  //routes for SignIn and Password Reset pages
       <Router basename={appBaseURI}>
         <SignInComp />
         <PwdResetComp />
       </Router>
     </UnauthenticatedTemplate>
   </MsalAuthenticationTemplate>
 </MsalProvider>