I have a component like this -->

<form onSubmit={verifyOTP}>
            ....
            .....
           <div className="auth-btn-wrap">
           <button disabled={isLoading ? true : false} type="submit" className="btn btrimary">
           {isLoading ? (<CircularProgress />) : (<>Verify OTP</>)}</button>
           {isLoading ? null : (<Link onClick={resendOTP}>Resend</Link>)}
        </div>
     <div id="recaptcha-container" />
</form>

verifyOTP function looks like this -->

const verifyOTP = (e: React.SyntheticEvent) => {
    e.preventDefault();
    if (window.confirmationResult) {
      window.confirmationResult
        .confirm(otp)
        .then(async () => {
          dispatch(signupStartStart({ user: { ...user, otp, otpConfirm: window.confirmationResult }, history }));
        })
        .catch((e: any) => {
          console.error(e);
          snack.error("Invalid OTP");
        });
    } else {
      window.location.reload();
    }
  };

In my user saga file, action signupStartStart looks like this -->

{.......
    .......
            const result = yield call(sendOTPWithFb, {
              phoneNumber: user.countryCode + user.phoneNumber, containerName: "recaptcha-container"
            });

            yield put (setLoading ({loading: false}));

            if (result) {
              yield put(showVerifyOTPSuccess());
              snack.success('An OTP has been sent to you mobile');
            } else {
              snack.error("Unable to send OTP");
            }
        }

The function that sends OTP is this -->

export const sendOTPWithFb = async (data: any): Promise<boolean> => {
  const { phoneNumber, containerName } = data

  try {
    const appVerifier = new FirebaseTypes.auth.RecaptchaVerifier(
      containerName,
      {
        size: "invisible",
      }
    );

    const confirmationResult = await firebase
      .auth()
      .signInWithPhoneNumber(`${phoneNumber}`, appVerifier);
    window.confirmationResult = confirmationResult;
    return true;
  } catch (error) {
    console.error(error);
    return false;
  }
};

Whenever I click on Resend OTP button, it gives me error that ---> "reCAPTCHA has already been rendered in this element"

PLease let me know how to resolve this issue