React-msal Interoperability between different accounts

Question

I have two different Configurations What I want to achieve is that in one application, I can use the accounts of these two applications to authenticate and achieve interoperability.

export const msalConfig: Configuration = {
  auth:  {
        clientId: "1111-222-333-444",
        authority:
          "https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47",
        redirectUri: "http://localhost:3000",
      };
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  },
};

export const pmeConfig: Configuration = {
  auth:  {
        clientId: "2222-333-444-555",
        authority:
          "https://login.microsoftonline.com/975f013f-7f24-47e8-a7d3-abc4752bf346",
        redirectUri: "http://localhost:3000",
      };
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  },
};

Is there any way that he only needs one config so that the accounts in the two domains can log in to each other?

This is what I am doing now, but there are many problems

  // Initialize client side tracing
  initializeAppInsights();

  // Initialize Icons
  initializeIcons();
const RootComponent = () => {
  const [instances,setInstance] = useState<PublicClientApplication|null>(null);


  // Inject some global styles
  mergeStyles({
    ":global(body,html,#root)": {
      margin: 0,
      padding: 0,
      height: "100vh",
    },
  });
  React.useEffect(() => {
    const session = sessionStorage.getItem("clientId")
    if (session) {
      if (session == msalConfig.auth.clientId)
      {
        setInstance(new PublicClientApplication(msalConfig))
      }
      else {
        setInstance(new PublicClientApplication(pmeConfig))
      }
    }
  }, []);
  document.title = "OfferStore Portal";
const handAccountType = (atype:string)=>()=>{
  if(atype == "pme")
  {
    setInstance(new PublicClientApplication(pmeConfig))
    sessionStorage.setItem("clientId",pmeConfig.auth.clientId)
  }
  else if (atype == "ms")
  {
     setInstance(new PublicClientApplication(msalConfig))
     sessionStorage.setItem("clientId",msalConfig.auth.clientId)
  }
  else
  {
    return
  }
}
  return (
instances!=null?(
      <CookiesProvider>
        <MsalProvider instance={instances!}>
          <App />
        </MsalProvider>
      </CookiesProvider>):(
           <Stack style={{ marginTop: '50px' }}  tokens={stackTokens}>
           <PrimaryButton  onClick={handAccountType("ms")}  text="Microsoft Account" />
           <PrimaryButton  onClick={handAccountType("pme")} text="PME Account" />
         </Stack>)
  );
};
ReactDOM.render(<RootComponent />, document.getElementById("root"));

Is it possible to log in with just two doamin accounts in one app?