Nextjs Firebase Phone Auth

First attempt useEffect()

useEffect(() => {
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha', {
            'size': 'invisible',
            'callback': (response) => {
                console.log("This is not fired on loading", response)
            }
        })

    }, [])

return (
        <>
            <div id="recaptcha"></div>
            <button onClick={clicked}> Click me </button>
        </>
    )

This runs, however the recaptcha doesn't work... User is forced to pick fire hydrants.

Second attempt: React Component

Inspiration: https://stackoverflow.com/a/63860925/7451631 Import this to Login page

class Recap extends Component {

  constructor(props) {
    super(props);
    this.signIn = this.signIn.bind(this);
  }

  componentDidMount() {
    window.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier(this.recaptcha, {
      'size': 'invisible',
      'callback': function (response) {
        console.log("Magic", response)
      }
    })
  }

  signIn() {
    firebase.auth().signInWithPhoneNumber(phoneNumber, window.reCaptchaVerifier).catch((error) => {
      console.log(error)
    })
  }

  render() {
    return (
      <>
        <div ref={(ref) => this.recaptcha = ref} onClick={this.signIn}> Clik meeeee </div>
      </>
    )
  }
}

Works! I got a ugly solution while typing up this question. If anyone knows how to make it nicer or can explain why the first attempt did not work that would be dope.