Unable to Open the redirect URL in Teams using deep linking inside Teams.

Question

import React, { useEffect } from 'react';
import { PublicClientApplication } from '@azure/msal-browser';
import * as microsoftTeams from '@microsoft/teams-js'; // Import the Microsoft Teams SDK

const LoginPage = () => {
  useEffect(() => {
    const login = async () => {
      const msalConfig = {
        auth: {
          clientId: '4c6b1611-f4c3-4361-b277-d53ce0bcab30',
          authority: 'https://login.microsoftonline.com/c343956a-ebea-4955-8100-c3757c525c64',
          redirectUri: 'https://app.hifives.in/app/home' // Update with your app's redirect URI
        },
        cache: {
          cacheLocation: 'localtorage',
          storeAuthStateInCookie: false
        }
      };

      const pca = new PublicClientApplication(msalConfig);
      const loginRequest = {
        scopes: ['user.read'] // Add any additional scopes as needed
      };

      try {
        // The following line will open a popup window for authentication
        pca.loginPopup(loginRequest);
        // Once the authentication is complete, the control will redirect back to the redirectUri
        // Handle successful login, e.g., redirect to a different page
      } catch (error) {
        console.log(error);
        // Handle login error
      }
    };

    login();

    // Listen for the popstate event and call the handleRedirect function when it is fired
    return () => {
      document.removeEventListener('popstate', handleRedirect);
    };
  }, []);

  const handleRedirect = (event) => {
    // Get the redirect URL from the event object
    const redirectUrl = event.target.location.href;

    // Close the popup window
    window.close();

    // Open the redirect URL in Teams using deep linking
    microsoftTeams.initialize();
    microsoftTeams.executeDeepLink(redirectUrl);
  };

  return (
    <div>
      Loading...</div> // Display a loading indicator while logging in
  );
};

export default LoginPage;