【React.js】Firebaseの電話番号認証でreCAPTCHAのウィジェットが表示されない

reCAPTCHAのウィジェットが表示されないため送信ボタンを押すとエラーメッセージで、reCAPTCHA placeholder element must be an element or idと出てしまいます。
id付与して要素は用意しているのですがどういう事でしょうか？

React
1import React from 'react';
2import firebase from '../firebase';
3import '../PhoneCheck.css';
4
5class PhoneCheck extends React.Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9        phone: '',
10    };
11  }
12
13  componentDidMount() {
14    window.appVerifier = new firebase.auth.RecaptchaVerifier(
15      "recaptcha-container",
16      {
17       size:"invisible"
18      }
19    );
20  }
21
22  handleToPhoneAuth = () => {
23    const { phone } = this.state;
24    if (phone === '') {
25      return;
26    }
27
28
29    firebase
30        .auth()
31        .signInWithPhoneNumber(phone, window.appVerifier)
32        .then(confirmResult =>
33          alert("成功")
34        )
35        .catch(error =>
36          alert(error.message)
37        );
38    this.props.history.push('/phoneauth');
39  }
40
41  handleChange = (event) => {
42    this.setState({phone: event.target.value});
43  }
44
45  render() {
46    let wh = window.innerHeight + 'px';
47    let wrapperStyle = {
48      height: wh
49    };
50    const { phone } = this.state;
51
52    return(
53    <div className="PhoneCheck-page" style={wrapperStyle}>
54      <div className="PhoneCheck-container">
55        <div className="PhoneCheck-center">
56          <input
57            className="PhoneCheck-input"
58            type="text"
59            value={phone}
60            placeholder="08012345678"
61            onChange={this.handleChange}
62          />
63          <input id="recaptcha-container" type="button" />
64          <div className="PhoneCheck-caption">SMSで認証コードを送信します</div>
65          <div className="PhoneCheck-btn" onClick={this.handleToPhoneAuth}>送信</div>
66        </div>
67      </div>
68    </div>
69    );
70  }
71}
72
73export default PhoneCheck;
74

行動規範の内容に同意します

回答1件

自己解決

React
1// invisibleの変更
2window.appVerifier = new firebase.auth.RecaptchaVerifier(
3      "recaptcha-container",
4      {
5       size:"normal",
6       'callback': function(token) {
7          console.log(token);
8        },
9        'expired-callback': function() {
10          console.log("コール");
11        }
12      }
13    );
14// inputの部分を変更
15<div ref={ref => this.recaptchaWrapperRef = ref}>
16  <div id="recaptcha-container"></div>
17</div>