SSO Not working in "Safari" and Working fine in Crome browser

SSO working in Crome using below Code(SPFx) and Not working in "Safari".
Please provide solution of the issue . Below is the Error and Code which we have used.

Error :
[Error] Refused to display 'https://login.microsoftonline.com/f9527b8e-12ef-47fc-85aa-443d41b6f525/oauth2/authorize?client%5Fid=00000003%2D0000%2D0ff1%2Dce00%2D000000000000&response%5Fmode=form%5Fpost&response%5Ftype=code%20id%5Ftoken&resource=00000003%2D0000%2D0ff1%2Dce00%2D000&scope=openid&nonce=2407EA3B3BE17EEA3C4CCBBF6A7569006D04A2662993FAFC%2D7A624D58C3514CA6A587AAC7A4E5931982BFCC684C928B94A683442&redirect%5Furi=https%3A%2F%2Fnyusa%2Esharepoint%2Ecom%2F%5Fforms%2Fdefault%2Easpx&state=OD0w&claims=%7B%22id%5Ftoke...er+is+using+Internet+Explorer+or+Edge%2c+and+the+web+app+sending+the+silent+sign-in+request+is+in+different+IE+security+zone+than+the+Azure+AD+endpoint+(login.microsoftonline.com).+Trace+ID%3a+8a43b3b6-3288-4fcb-8031-1380a8cc5600+Correlation+ID%3a+01958a7b-bf28-7ced-828c-fff97cfe1625+Timestamp%3a+2025-03-12+13%3a12%3a01Z&error_uri=https%3a%2f%2flogin.microsoftonline.com%2ferror%3fcode%3d50058&state=eyJpZCI6IjAxOTU4YTdiLWJmMmQtNzNjMC1iZmZkLTFhNmU4NThkZmQwOSIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoic2lsZW50In19' in a frame because it set 'X-Frame-Options' to 'DENY'.

Code :

// MSALWrapper.ts
import {
  PublicClientApplication, AuthenticationResult,
  Configuration, InteractionRequiredAuthError,
  LogLevel
} from "@azure/msal-browser";

export class MSALWrapper {
  private msalConfig: Configuration;
  private msalInstance: PublicClientApplication;

  constructor(clientId: string, authority: string) {
    this.msalConfig = {
      auth: {
        clientId: clientId,
        authority: authority,
      },
      cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true,  // Important for Safari
      },
      system: {
        loggerOptions: {
          logLevel: LogLevel.Info,
          loggerCallback: (level, message, containsPii) => {
            console.log(message);
          },
          piiLoggingEnabled: false,
        },
      },
    };

    this.msalInstance = new PublicClientApplication(this.msalConfig);

  }

  public async handleLoggedInUser(scopes: string[], userEmail: string): Promise<AuthenticationResult | undefined> {
    try {
      await this.msalInstance.initialize();
      let userAccount = undefined;
      const accounts = this.msalInstance.getAllAccounts();

      if (!accounts || accounts.length === 0) {
        console.log("No users are signed in");
        return undefined;
      } else if (accounts.length > 1) {
        console.log("USER Email : ", userEmail);
        userAccount = this.msalInstance.getAccountByUsername(userEmail);
      } else {

        userAccount = accounts[0];
      }
      console.log("USER ACCOUNT : ", userAccount);

      if (userAccount !== undefined) {
        const accessTokenRequest = {
          scopes: scopes,
          loginHint: userEmail,
          account: userAccount
        };

        try {
          const response = await this.msalInstance.acquireTokenSilent(accessTokenRequest);
          return response;
        } catch (error) {
          console.log("==>> ERROR : ", error);
          // Fall back to loginRedirect in case of failure
          if (error instanceof InteractionRequiredAuthError) {
            console.log("Silent token acquisition failed. Redirecting user for login...");
            this.msalInstance.loginRedirect(accessTokenRequest);
          }
          return undefined;
        }
      }

      return undefined;
    } catch (e) {
      console.error("Error handling logged-in user: ", e);
      return undefined;
    }
  }


  // Acquire the access token with fallback to loginRedirect
  public async acquireAccessToken(scopes: string[], userEmail: string): Promise<AuthenticationResult | undefined> {
    await this.msalInstance.initialize();
    const accessTokenRequest = {
      scopes: scopes,
      loginHint: userEmail
    };

    try {
      // First attempt to acquire token silently
      const response = await this.msalInstance.acquireTokenSilent(accessTokenRequest);
      return response;
    } catch (silentError) {
      console.log(silentError);

      if (silentError instanceof InteractionRequiredAuthError) {
        // Fallback to loginRedirect if silent token acquisition fails
        console.log("Silent token acquisition failed. Redirecting user for login...");
        this.msalInstance.loginRedirect(accessTokenRequest); // Perform redirect login
        return undefined;
      }

      // If an error occurs that isn't InteractionRequiredAuthError, return undefined
      return undefined;
    }
  }
}

export default MSALWrapper;