displayDialogAsync does work in vanilla js but doesn't with react

[YugoAmaryl]

I have made a POC of my app with the vanilla javascript template created using the yo office command. The authentication works with displayDialogAsync:

  const options = {
      height: 65,
      width: 30,
      promptBeforeOpen: true,
  };

  Office.context.ui.displayDialogAsync(baseurl + '/login_add_ons?redirect=https://localhost:3000/taskpane.html',options , function (asyncResult){
      let dialog = asyncResult.value;
      dialog.addEventHandler(Office.EventType.DialogMessageReceived, function(_arg) {
        dialog.close();
        let code = new URL(JSON.parse(_arg.message).value).searchParams.get("code");
        axios.get(baseurl + "/token_add_ons", {params: {code: code}})
        .then(function (response){
          localStorage.setItem('token', response.data.access_token);
          mainCRMPage();
        });
    });
  })

Of course I have also this code on the same page

Office.initialize = function () {
  if (OfficeHelpers.Authenticator.isAuthDialog()) return;
};

This works fine on outlook.com and outlook desktop as well.

However, when I try the same process using the react template, on outlook desktop the popup doesn't even open. On oultook.com, it does open to the correct page, but then doesn't close, and I'm unable to retrieve the code.

I basically copy pasted my code between the two apps. In react this is the full thing:

Office.initialize = () => {
  if (Authenticator.isAuthDialog()) return

  isOfficeInitialized = true;
  render(App);
};

Office.onReady(info => {
  if (info.host === Office.HostType.Outlook) {
    const options = {
      height: 65,
      width: 30,
      promptBeforeOpen: true,
    };

    Office.context.ui.displayDialogAsync(baseurl + '/login_add_ons?redirect=https://localhost:3000/taskpane.html',options , function (asyncResult){
      console.log(asyncResult);
      let dialog = asyncResult.value;
      dialog.addEventHandler(Office.EventType.DialogMessageReceived, function(_arg) {
        console.log("aaaaa");
        dialog.close();
        let code = new URL(JSON.parse(_arg.message).value).searchParams.get("code");
        console.log(code);
        /*axios.get(baseurl + "/token_add_ons", {params: {code: code}})
        .then(function (response){
          localStorage.setItem('token', response.data.access_token);
          mainCRMPage();
        });*/
    });
  })
  }
})

I'm out of ideas...

[YugoAmaryl]

Nevermind. I had forgotten about the <AppDomains> in my manifest. And outlook desktop wants the subdomain as well, not just the domain like outlook.com.