React FirebaseUI Authentication with Facebook failed

I am using FirebaseUI-Authentication. Signing in with an email or a Google account is successful and no problem at all, but sign in with Facebook used to work, but it failed to sign in using facebook recently. After sign in attempt the app is stuck at the loading window. there are no any error I can see.

Below is my firebaseui authentication setup code:

firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

const firebaseConfig = {
    apiKey: "................",
    authDomain: "..............",
    projectId: ".........",
    storageBucket: "...........",
    messagingSenderId: ".........",
    appId: ".............",
    measurementId: ".........."
  };

  const firebaseApp=firebase.initializeApp(firebaseConfig);

  const db=firebaseApp.firestore();
  const auth=firebase.auth();
  const storage=firebase.storage();

  const uiConfig=({
    signInFlow: "popup",
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      
    ],
    callbacks:{
      signInSuccessWithAuthResult: () => false,
    },
  });

  export {db,auth,storage,uiConfig};

login.js

import React, { useState,useEffect } from 'react';
import firebase from 'firebase/compat/app';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import './Login.css';
import { auth, uiConfig} from './firebase';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

function Login() {
  const history = useHistory ();
  const [isSignedIn, setIsSignedIn] = useState(false);
  
  useEffect(() => {
    const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
      setIsSignedIn(!!user);
    });
    return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
  }, []);

  if (!isSignedIn) {
    return (
      <div className='login'>
        <div className='left_login'>
        <h1>Please sign-in:</h1>
        <br />
        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
        </div>
        <div className='right_login'>
         <h1>Wei White Art</h1>
         <br />
            <img 
            className='login_logo'
            src='../Logo design 7.png' alt='' />
          <br />
          <h4>Under the privacy policy, Weiwhite Art collects only user's email for order and payment confirmation</h4>
        </div>
      </div>
    );
    
  }
  return (
    <div>
       <h1>Wei White Art</h1>
      <p>Hello {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
      <br /> 
      <button className='sign__button' 
          onClick={() => history.push('/')}>
            Continue Shopping
          </button>
     <h3>Please note that user's email in each login is needed to process checkout</h3>
       <img 
        className='login_logo'
        src='../Logo design 7.png' alt='' /> 
      </div>
  );
}

export default Login;

I already set up the facebook authentication method with APP id and App secret, and also copy the OAuth redirect URI to facebook app configuration.and turn on the App live mode. It still doen't work. The other authentication methods Google, Email, Twitter, and Github has no problem. The facebook login is NOT working. After I hit the facebook login button, it just stuck without any error hint.

I found that the issue is caused by a firebase ->authentication -> setting -> user account linking, and change it to create multiple accounts for each identity provider.after the setting change, I can successfully login facebook.