popup_window_error: Error opening popup window in Teams App

Question

So I have a react application where I used MSAL pop up flow. It works perfectly fine in a browser. But when I add it in Teams using teams manifest, it failed to open the popup with this error - BrowserAuthError: popup_window_error: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser teams.

Here is my manifest -

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.8",
  "version": "1.0.0",
  "id": "",
  "packageName": "com.microsoft.ixora.dfl",
  "developer": {
    "name": "I",
    "websiteUrl": "",
    "privacyUrl": ",
    "termsOfUseUrl": ""
  },
  "icons": {
    "color": "color.png",
    "outline": "outline.png"
  },
  "name": {
    "short": "",
    "full": ""
  },
  "description": {
    "short": "",
    "full": ""
  },
  "accentColor": "#5B5FC7",
  "staticTabs": [
    {
      "entityId": "index",
      "name": "",
      "contentUrl": "",
      "websiteUrl": ",
      "scopes": ["personal"]
    }
  ],
  "permissions": [],
  "validDomains": ["", "login.microsoftonline.com"],
  "devicePermissions": ["openExternal"]
}

I have removed sensitive information's from here.

I have tried to open a popup with this code - window.open("", "_blank", "height=600,width=400"). Still got the same error. I have to use pop up flow as per the requirement.

From my research I have found that it is not possible. Is there any alternative way to work with pop up workflow?

Any help will be greatly appreciated.