Error: [auth/unknown] Cannot create PhoneAuthCredential without either verificationProof, sessionInfo, temporary proof, or enrollment ID

I am trying to make a Login page with Phone Authentication to use React-Native-Firebase sdk and I receive OTP through sms and when I confirm the received OTP ,I got a error that: [Error: [auth/unknown] Cannot create PhoneAuthCredential without either verificationProof, sessionInfo, temporary proof, or enrollment ID.]

1. I am using-

• React:18.0.0
• React-Native: 0.69.1
• React-Native-Firebase:^15.1.1

My code is-

import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  Alert,
} from 'react-native';
import PhoneInput from 'react-native-phone-number-input';
import auth from '@react-native-firebase/auth';
const Login = () => {
  const [PhoneNumber, setPhoneNumber] = useState('');
  const [otpInput, setOtpInput] = useState('');
  const [confirmData, setConfirmData] = useState('');

const sendOtp = async () => {
    try {
      const responce = await auth().signInWithPhoneNumber(PhoneNumber);
      setConfirmData(responce);
      console.log(responce);
      Alert.alert('Otp is sent please varify it');
    } catch (error) {
      console.log(error);
    }
  }

  const submitOtp = async () => {
    try {
      const responce = await confirmData.confirm(otpInput);
      console.log(responce);
      Alert.alert('Your Number is verified');
    } catch (error) {
      console.log(error);
    }
  }
  return (
    <View>
      <View style={styles.con}>
        <Text style={styles.container}>Login Screen</Text>
        <Image source={require('../assets/logo.png')} style={styles.image} />
      </View>
      <View style={styles.inputContainer}>
        <Text style={styles.labels}>Phone Number:</Text>
        <PhoneInput
          style={styles.inputStyle}
          defaultValue={PhoneNumber}
          defaultCode="DM"
          layout="first"
          keyboardType="number-pad"
          onChangeFormattedText={text => setPhoneNumber(text)}
          onChangeText={(value) => setPhoneNumber(value)}
    />
      </View>
 <View>
        <TouchableOpacity
          style={styles.buttonStyle}>
          <Text style={styles.buttonText}>Verify</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.otpContainer}>
        <TextInput
          style={styles.otpStyle}
          placeholder="Enter OTP"
          autoCapitalize="none"
          secureTextEntry={true}
          onChangeText={(value) => setOtpInput(value)}/>
      </View>
      <View>
        <TouchableOpacity style={styles.continueStyle}>
          <Text
            style={styles.buttonText}
            onPress={() => submitOtp()}>
            Continue
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};
export default Login;