firebase oauth authentication

Question

I have the following signin methods in my firebase application,

signInWithMicrosoft() {
    this.hasGoogleAuth = false;
    const provider = new firebase.auth.OAuthProvider('microsoft.com');
    auth.signInWithPopup(provider).then((result) => {
        //User is signed in
        //IdP data available in result.additionalUserInfo.profile
        //Get the OAuth access token and ID token
        const accessToken = result.credential.accessToken;
        const idToken = result.credential.idToken;
        this.userLookUp(result.user.email);
    }).catch((error) => {
        //Handle the error
        if(error.code == "auth/account-exists-with-different-credential") {
            this.error = "This account is not linked with this method of signin. Please try an alternative";
        }
    })
},

signInWithGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider();
    auth.signInWithPopup(provider).then((result) => {
        console.log('success', result.user.email);
        let userEmail = result.user.email; // Capture user email for easier debugging
        this.userLookUp(userEmail);
    }).catch((error) => {
        if(error.code == "auth/account-exists-with-different-credential") {
            this.error = "This account is not linked with this method of signin. Please try an alternative";
        } else {
            this.error = "An error was encountered signing you in via Google";
        }

    });
},

If I am logging in with google and then login with Microsoft I get an error saying my account is linked to another account. If I login with Microsoft and then google I can login in no problem. What am I doing wrong?

My auth settings,