Firebase RecaptchaVerifier.clear() has no effect

Question

I have react web app where I want to implement phone auth. I have initialized recaptchaVerifier based on docs and examples. However if I want to submit the form again (say

Answer 1

So, I have figure it out. The problem wasn't clear() method - that is working properly. But I have to recreate the captcha container from scratch myself. Doc isn't clear about it, so that's confused me. In the docs there is:

Clears the reCAPTCHA widget from the page and destroys the current instance.

So I thought that it will be removed via the method.

So, right now I have this code in the render method:

 this.recaptchaWrapperRef = ref}>
  

and then in the submit callback:

if (this.applicationVerifier && this.recaptchaWrapperRef) {
  this.applicationVerifier.clear()
  this.recaptchaWrapperRef.innerHTML = `
`
}

// Initialize new reCaptcha verifier
this.applicationVerifier = new firebase.auth.RecaptchaVerifier(
  'recaptcha-container',
  { size: 'invisible' }
);

This is the only way how I manage to do it in react. If someone still ahve better way to do it, feel free to post it. As I think this is pretty ugly (for React).