Recaptcha verification failed - DUPE - firebase phone verification react

Question

So basically after a user registers an account of my web application I want to send a user a text using the number they input. But I keep getting this error.

Recaptcha verification failed - DUPE

Plus in my window's console, I get an error 'Uncaught SyntaxError: unexpected token: string literal' I should note that I am using the invisible Recaptcha and I have set everything in firebase for email and phone authentication

export default class PhoneNumberVerificationPage extends Component {
    constructor(props){
        super(props);
        this.state={
            phone: '',
            isLoading: false
            
        }
    }
    onChangeHandler = (phone) =>{
        this.setState({
            phone
        })
    }

    onVerifyPhoneNumber = async () =>{
        const {phone} = this.state;
        let phoneNumber = "+" + phone;
        var appVerifier = new f.auth.RecaptchaVerifier('button', {
            'size': 'invisible'
        });

        return auth.currentUser.linkWithPhoneNumber(phoneNumber, appVerifier)
            .then( (confirmationResult) => {
              
                var code = window.prompt('Provide put in the your SMS code');
                return confirmationResult.confirm(code);
            })
            .then(async () =>{
                
                await firestore.doc(`/user/${auth.currentUser.uid}`).update({
                    nextRoute: `/user-info/${auth.currentUser.uid}/add`
                })
                this.props.history.push(`/user-info/${auth.currentUser.uid}/add`)

            })
       
    }
    render() {
        const {isLoading} = this.state
        return (
            <div className='phone-number-verification-page'>
                {isLoading && <Loading/>}
                <Modal title='Verify Phone Number' hideCloseButton>
                    <PhoneInput
                        country={'us'}
                        value={this.state.phone}
                        onChange={this.onChangeHandler}
                    />
                    <button 
                        onClick={this.onVerifyPhoneNumber} 
                        id='button'
                        className='button--submit u-margin-medium'>Submit</button>
                </Modal>
            </div>
        )
    }
}

Answer 1

the DUPE in the error message is short for DUPLICATE. I suspect you should not create a new RecaptchaVerifier object every time and instead reuse one.