Why function within useEffect runs twice [duplicate]

export const Redirect = () => {
    const navigate = useNavigate();
    const url = new URL(window.location.href);
    const authorizationCode = url.searchParams.get('code');
    const { provider } = useParams();
    const updateUserState = useSetRecoilState(userState);

    useEffect(() => {
        const socialLogin = async () => {
            const idtoken = await requestIdtoken(authorizationCode, provider);
            const isUser = await requestLogin(provider, idtoken);

            if (isUser) {
                const response = await requestUserInfo();
                *updateUserState({ ...response.data, isLogin: true });*
                navigate('/');
            } else {
                navigate(`/signup/${provider}`);
            }
        };
 
        socialLogin();
    }, []);

    return <div></div>;

Here is my code.

when I run this code. socialLogin function run twice.
but if I annotate <React.StrictMode>, it goes well.

I thought changing the state within useEffect was the cause, but it’s also resolved in the above way, so I wonder what’s the real cause

using useRef I ensure that the function runs only once.

export const Redirect = () => {
    const navigate = useNavigate();
    const url = new URL(window.location.href);
    const authorizationCode = url.searchParams.get('code');
    const { provider } = useParams();
    const updateUserState = useSetRecoilState(userState);
    *const isEffectRun = useRef(false);*

    useEffect(() => {
        *if (isEffectRun.current) {  
            return;
        }*
        const socialLogin = async () => {
            const idtoken = await requestIdtoken(authorizationCode, provider);
            const isUser = await requestLogin(provider, idtoken);

            if (isUser) {
                const response = await requestUserInfo();
                updateUserState({ ...response.data, isLogin: true });
                navigate('/');
            } else {
                navigate(`/signup/${provider}`);
            }
        };
 
        socialLogin();
        *isEffectRun.current = true;*
    }, []);

    return <div></div>;

StrictMode vs. Change state in useEffect( updateUserState() )

which one is the real cause? or both? (There is no parent Component and props)

And also let me know if you have any better ideas