firebase authentication with facebook issues

Question

i had an issue trying to my react app using facebook provider. i did it with google and and i didn't faced any problem everything is fine.

so i enabled facebook auth in my console and create an App ID & App secret from https://developers.facebook.com/ and also linked the redirect URI to my app.

Then i create a button and used the signInWithPopup to login in, and import my provider:

// my config file:
import { FacebookAuthProvider } from "firebase/auth";
export const provider2 = new FacebookAuthProvider();

// my login file:

import { auth, provider2 } from "../firebase/config";


          <FacebookButton
            onClick={(eo) => {
              signInWithPopup(auth, provider2)
                .then((result) => {
                  const user = result.user;

                  navigate("/home");
                  console.log(user);
                })
                .catch((error) => {
                  // Handle Errors here.
                  const errorCode = error.code;
                  console.log(errorCode);
                });
            }}
            sx={{ borderRadius: "8px" }}
            size="large"
            variant="contained"
            href="#text-buttons"
            startIcon={<FacebookIcon />}
          >
            Sign in with facebook
          </FacebookButton>

Then when i go to my website and click on it,it show the facebook popup, and this error come with the facebook logo on the top :

Sorry, something went wrong. We're working on getting this fixed as soon as we can.

Go Back.

What i tried:

when i clear my navigator cache then click again on my button the error didn't shown at the beginning. the popup show a normal facebook page with the email anf password field to enter. so when enter the email and password the error come back again.