How to add phone number to a logged in user(created with email and password) in firebase Auth in react?

I am using firebasev9 authentication for my react project. I have used email authentication for logging in/signing up a user. I want to add phone number too in the user but I am doing all the right steps but when I call updatePhoneNumber with user and phone crediential it throws an error and doesnt add phone number. I am updating the displayName too within the same function which works fine.

I have enabled phone signin in firebase dashboard

The error I am getting is this: (https://i.postimg.cc/yY55Qzg2/Screenshot-2022-06-25-200735.jpg)

This is my signup function:

const signup = async (email, password, displayName, phoneNumber,phoneCrediential, userType) => {
        setError(null);
        setIsPending(true);

        try {
            const res = await createUserWithEmailAndPassword(
                auth,
                email,
                password
            );
            console.log(res.user);

            if (!res) {
                throw new Error("Could not complete signUp");
            }
            debugger;

            await updateProfile(res.user, { displayName });

            **This updatePhonenumber function throws this error flow moves to catch block**

            const resPhone = await updatePhoneNumber(auth.currentUser, phoneCrediential );
            console.log(resPhone)

            dispatch({ type: "LOGIN", payload: res.user });
            console.log(res.user)


            addDocument({
                name: res.user.displayName,
                email: res.user.email,
                uid: res.user.uid,
                type: userType,
            });

            if (!isCancelled) {
                setError(null);
                setIsPending(false);
            }
        } catch (err) {
            if (!isCancelled) {
                console.log(err.message);
                setError(err.message);
                setIsPending(false);
            }
        }
    };

In my component, I take phone number, generate Otp, and take otp and pass phoneCredential to the signup function:

    const [verificationIdState, setVerificationIdState] = useState(null);
    const [phoneCredientialState, setPhoneCredientialState] = useState(null);

    const handleRecaptcha = () => {
        window.recaptchaVerifier = new RecaptchaVerifier(
            "sign-in-button",
            {
                size: "invisible",
                callback: (response) => {
                    // reCAPTCHA solved
                },
            },
            auth
        );
    };

    const handleGetOTP = () => {
        handleRecaptcha();
        const phoneNumber = "+91" + userPhoneNumber;
        const applicationVerifier = window.recaptchaVerifier;
        const provider = new PhoneAuthProvider(auth);

        const verificationId = provider.verifyPhoneNumber(
            phoneNumber,
            applicationVerifier
        );

        if (verificationId) {
            setVerificationIdState(verificationId);
        }
    };

    const handleOTPSubmit = () => {
        const phoneCredential = PhoneAuthProvider.credential(
            verificationIdState,
            userOTP
        );

        if (phoneCredential) {
            setPhoneCredientialState(phoneCredential);
            console.log(phoneCredential);
        }
    };

    //Base Register
    const handleRegisterSubmit = (e) => {
        e.preventDefault();
        
        signup(
            userEmail,
            userPassword,
            userName,
            userPhoneNumber,
            phoneCredientialState,
            userType
        );
    };