react-toastify popup showing 2 times

Question

Website error visual on chrome I create a react website. On this website, I create a social login icon using firebase-hooks. But when I click on the social login button the pop-up shows. But after closing that pop-up I use react toastify to show the error. But always It's showing twice. and can't fix this problem

const SocialLogin = () => {
const navigate = useNavigate();
const location = useLocation();
const from = location.state?.from?.pathname || "/";
const [signInWithFacebook, facebookUser, facebookLoading, facebookError] =
   useSignInWithFacebook(auth);
facebookError && toast.error(facebookError.message);
const [token] = useToken(facebookUser);
token && navigate(from, { replace: true });
return (
  <div>
    <div className="or">
      <div></div>
      OR
      <div></div>
    </div>
    <div className="social-logins">
      <p>{facebookLoading && `Loadin Please Wait`}</p>
      <div className="social-btn" onClick={() => signInWithFacebook()}>
        <SiFacebook />
        <span>Facebook</span>
      </div>
    </div>

    <ToastContainer pauseOnHover />
  </div>
);
};

Answer 1

That may be because there are two <ToastContainers />'s one in that component and one in higher-order component. Removing one worked for me

Answer 2

toast message will be appeared on every re render , you need to call toast when you get error message from fb , you need to call toast inside of useEffect, something like this

    React.useEffect(() => {
        if (facebookError.message) {
            toast.error(facebookError.message);
        }
    }, [facebookError.message])