React app with auth0 app that have 2 providers

Question

I want to achieve role-based authentication with Auth0. I have the following scenario.

I have /account/research i want to log the user in as researcher And /account/student where i want to log this user as student. But if i land on /account how do i determine which route i should login and which provider to trigger.

Here is my code

function ResearchProvider({ children }) {
  return <Auth0Provider {...researchProviderConfig}>{children}</Auth0Provider>;
}

function StudentProvider({ children }) {
  return <Auth0Provider {...studentProviderConfig}>{children}</Auth0Provider>;
}

function getProvider({ path }) {
  if (path.includes('/account/research')) {
    return ResearchProvider;
  }

  if (path.includes('/account/student')) {
    return StudentProvider;
  }
}

function App() {
  const location = useLocation();
  const ProviderToRender = getProvider({ path: location.pathname });

  return (
    <ProviderToRender>
      <Outlet />
    </ProviderToRender>
  );
}

I want to be able to land on /account and determine which Auth0Provider should i call do check if the user is valid.