getting 'Cross-Origin-Opener-Policy policy would block the window.closed' with React but not with VanillahJS

Question

Hello I know this has been posted few times but I still not have come across a proper answer. My situation is I am using the Google Popup login method as such below

googleSignIn (state, action) {   
            console.log('googleSignin')
            signInWithPopup(auth, googleProvider)
            .then((result) => {
            
              // This gives you a Google Access Token. You can use it to access the Google API.
              const credential = GoogleAuthProvider.credentialFromResult(result);
              const token = credential.accessToken;
              // The signed-in user info.
              const user = result.user;

              // ...
            }).catch((error) => {
            console.log('error')
              // Handle Errors here.
              const errorCode = error.code;
              const errorMessage = error.message;
              console.log(errorMessage)
              // The email of the user's account used.
              const email = error.customData.email;
              // The AuthCredential type that was used.
              const credential = GoogleAuthProvider.credentialFromError(error);
              // ...
            });
        } 

This has worked always worked flawlessly untill today and all of a sudden I am getting this error message:

Cross-Origin-Opener-Policy policy would block the window.closed call.

I tested this same code on a Vanillah JS project and even though it displays the same message, the Google authentication works just as before as it populates the returned user name and GUID into the HTML doc.

Here is a screenshot of the authorized domains in my project which applies to this app.

WWhat can I do here, I really feel stuck and can't get out it.