I've implemented firebase phone authentication in my angular app, everything is just correct but when I verify phone number and after sending otp for verification it gives an error of wrong OTP code even it is correct. This happens for the first attempt after second attempt it verifies OTP and start behaving as it should be.

This is geOTP method.

getOTP() {
this.showPhoneLoading = true;
this.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier
('sign-in-button',
{size: 'invisible'},)
// this.timer(1);
debugger
this.payload = {
  phoneNumber: `+${this.countryCode}`+this.phoneNumber
}
firebase
.auth()
.signInWithPhoneNumber(this.payload, this.reCaptchaVerifier)
.then((res)=> {
  console.log(res);
  localStorage.setItem('verificationId', JSON.stringify(res.verificationId))
  // debugger
  this.myStepper.next();
  this.cf.detectChanges();
  this.showPhoneLoading = false;
  this.toastr.success('We have sent an otp. Please fill in the below fields to continue.', 'Verify')
}).catch((error)=> {
  this.toastr.error(error.message)
   setTimeout(() => {
    window.location.reload()
  },2000);
})

}

this is my verification code.

  handleClick() {
debugger
this.showVerifyOtp = true;
debugger
const otp = this.otp.replace(/\s/g,'');
const credentials = firebase.auth.PhoneAuthProvider.credential(this.verify, otp);
debugger
firebase
.auth()
.signInWithCredential(credentials)
.then((res)=> {
  this.toastr.success('Your phone number is verified.', 'Success!')
  this.myStepper.next();
  this.showVerifyOtp = false;
  localStorage.setItem('user_data',JSON.stringify(res))
})
.catch((error) => {
  debugger
  if (error) {
        firebase.auth().signInWithCredential(credentials)
        this.myStepper.next();
     }
  })

}

currently im catching error and calling function again. please help me out.