I am developing a React Native mobile app in which I want to use Firebase’s phone authentication as well as Email Password authentication. For this purpose, after the user signs up using their mobile phone by verifying OTP, they have to enter their email and create a password. Then I try to link these credentials to the already logged in user but I am getting the following error:

Account linking error [Error: [auth/invalid-credential] The supplied auth credential is malformed, has expired or is not currently supported.]

import React from 'react'
import { useState } from 'react';
import { View, Text, TouchableOpacity, Pressable, StyleSheet, Image, TextInput } from 'react-native'
import { useNavigation } from '@react-navigation/native';
import { linkWithCredential, EmailAuthProvider } from "firebase/auth";
import auth from "@react-native-firebase/auth";


const SignupCreatePassword = ({ route }) => {
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const [secureText, setSecureText] = useState(true)
    const { userEmail } = route.params

    const validatePassword = (password: string): boolean => {
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d).{12,}$/;
        return passwordRegex.test(password);
    };

    const handleContinue = async () => {
        if (!validatePassword(password)) {
            setErrorMessage(
                'Password must be at least 12 characters long and include uppercase, lowercase, and numbers.'
            );
            return;
        }
        if (password !== confirmPassword) {
            setErrorMessage('Passwords do not match.');
            return;
        }
        setErrorMessage('');
        // Proceed to the next screen
        console.log('Password is valid and matches.');
        const credential = EmailAuthProvider.credential(userEmail, password);
        console.log("These are the credentials", credential)
        await auth().currentUser?.linkWithCredential(auth().currentUser, credential)
        .then((usercred) => {
            const user = usercred.user;
            console.log("Account linking success", user);
        }).catch((error) => {
            console.log("Account linking error", error);
        });
        
    };
    

  return (
    <View style={style.container}>
        
    {/*Back button and Sign In button */}
    <View style={style.topContainer} >
        <TouchableOpacity style={style.arrowButton}>
            <Image source={require('../../../assets/icons/arrow-left.png')}></Image>
        </TouchableOpacity>
    </View>

    {/* Main heading and subtext */}
    <View className='gap-2'>
        <Text className='font-inter-semibold' style={style.textTwo}>Create Password</Text>
        <Text className='font-inter-regular leading-[26px]' style={style.textThree}>Create a strong password for your future logins.</Text>
    </View>

    {/* Input field and button */}
    <View  className='gap-10 w-full items-center justify-center'>
        <View className='gap-5'>
        <View style={style.inputContainer}>
        <Image className='ml-5 -mt-1' source={require('../../../assets/icons/lock-icon.png')}></Image>
        <TextInput secureTextEntry={secureText} className='font-inter-regular'
        value={password}
        onChangeText={setPassword}
        style={style.inputField} 
        placeholder="Enter Password"
        />
        </View>

        <View style={style.inputContainer}>
        <Image className='ml-5 -mt-1' source={require('../../../assets/icons/lock-icon.png')}></Image>
        <TextInput secureTextEntry={secureText} className='font-inter-regular'
        value={confirmPassword}
        onChangeText={setConfirmPassword}
        style={style.inputField} 
        placeholder="Confirm Password"
        />
        <Pressable
         onPress={() => setSecureText(!secureText)}
            >
        <Image
        className="mr-6 -mt-1"
        source={secureText 
            ? require('../../../assets/icons/eyeslash-icon.png') 
            : require('../../../assets/icons/eye-icon.png')}
        />
        </Pressable>
        </View>
        </View>
        {errorMessage ? <Text>{errorMessage}</Text> : null}
        <TouchableOpacity style={style.inputButton} onPress={handleContinue}>
        <Text className='font-inter-semibold' style={style.textFour}>Continue</Text>
        </TouchableOpacity>
    </View>
    </View>
  )
}

const style = StyleSheet.create({
    container : {
        flex: 1,
        backgroundColor: 'rgba(45, 43, 46, 1)',
        padding: 20,
        gap: 40,

    },
    topContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',        
    },
    arrowButton : {
        alignItems: 'center',
        justifyContent: 'center',
        height: 40,
        width: 40,
        backgroundColor: 'rgba(234, 235, 240, 1)',
        borderRadius: 100
    },
    textOne :{
        color : 'rgba(110, 156, 58, 1)',
        fontSize: 18,
        textDecorationLine: 'underline'
    },
    textTwo :{
        color : 'rgba(255, 255, 255, 1)',
        fontSize: 32,
    },
    textThree :{
        color : 'rgba(255, 255, 255, 0.8)',
        fontSize: 18,
    },
    textFour :{
        color : 'rgba(64, 70, 63, 1)',
        fontSize: 15,
    },
    inputField :{
        flex: 1,
        width: 270,
        height: 56,
        backgroundColor: 'rgba(255, 255, 255, 1)',
        borderRadius: 100,
        paddingHorizontal: 18,
        fontSize: 16,
    },
    inputContainer :{
        width: 370,
        height: 56,
        backgroundColor: 'rgba(255, 255, 255, 1)',
        borderRadius: 100,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    inputButton :{
        width: 370,
        height: 56,
        backgroundColor: 'rgba(255, 255, 255, 1)',
        borderRadius: 100,
        alignItems: 'center',
        justifyContent: 'center',
    }

});

export default SignupCreatePassword;

I am using these firebase docs
I am using these firebase docs