Google ReCaptcha: response-google-recaptcha не проверяется правильно

Question

У меня есть следующий компонент React для контактной формы:

import React from 'react'
import ReCAPTCHA from "react-google-recaptcha";
import {Container, Row, Col, Form, Button } from 'react-bootstrap'
import '../styles/contact.css'

class Contact extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            name: '',
            email: '',
            company: '',
            content: '',
            showSuccess: false,
            submitting: false,
            verified: false,
            reply: ''
        };
        this.handleSuccess = this.handleSuccess.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.onChange = this.onChange.bind(this);
      }

    onChange = (value) => {
        console.log("Captcha value:", value);
        this.setState({
            verified: true
        })
    };


    handleInputChange = event => {
        const target = event.target
        const value = target.value
        const name = target.name
        this.setState({
          [name]: value,
        })
    }

    handleSuccess = () => {
        this.setState({
            name: '',
            email: '',
            company: '',
            content: '',
            showSuccess: true,
            submitting: false,
        })
    }

    handleSubmit = event => {

        const url = 'https://xxxxxxxx.execute-api.eu-central-1.amazonaws.com/dev/email/send';

        this.setState({
            submitting: true
          })

        const payload = {
            name: this.state.name,
            email: this.state.email,
            company: this.state.company,
            content: this.state.content
        }

        if (this.state.verified) {
            fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
            })
            .then(this.handleSuccess)
            .catch(error => alert(error))
            event.preventDefault()
        }
        else {this.setState({reply: "Please verify the ReCaptcha."})}
    }

    render() {
        return (
            <section id="contact" name="#contact">
                <Container>
                    <Row className="align-items-center">
                        <Col lg={{span: 5, order: 1}} xs={{ span: 12, order: 2}} className="form-background">
                            <Form id="contact-form-bottom" onSubmit={this.handleSubmit}>
                                <h4 className="h4">Don't be shy, say hi!</h4>
                                <Form.Group controlId="formBasicEmail">
                                    <Form.Label>Full Name</Form.Label>
                                    <Form.Control 
                                        as="input" 
                                        type="text" 
                                        placeholder="Enter your first name & surname" 
                                        name="name"
                                        value={this.state.name}
                                        onChange={this.handleInputChange}
                                        required
                                    />
                                </Form.Group>
                                <Form.Group controlId="formBasicEmail">
                                    <Form.Label>Email address</Form.Label>
                                    <Form.Control 
                                        as="input" 
                                        type="email" 
                                        placeholder="Enter your email address" 
                                        name="email"
                                        value={this.state.email}
                                        onChange={this.handleInputChange}
                                        required
                                    />
                                    <Form.Text className="text-muted">
                                    We'll never share your email with anyone else.
                                    </Form.Text>
                                </Form.Group>
                                <Form.Group controlId="formBasicEmail">
                                    <Form.Label>Company Name</Form.Label>
                                    <Form.Control 
                                        as="input" 
                                        type="text" 
                                        placeholder="Enter the name of your company" 
                                        name="company"
                                        value={this.state.company}
                                        onChange={this.handleInputChange}
                                        required
                                    />
                                </Form.Group>
                                <Form.Group controlId="exampleForm.ControlTextarea1">
                                    <Form.Label>Details</Form.Label>
                                    <Form.Control 
                                        as="textarea" 
                                        type="text" 
                                        rows="3" 
                                        placeholder="How can we help you?" 
                                        name="content"
                                        value={this.state.content}
                                        onChange={this.handleInputChange}
                                        required
                                    />
                                </Form.Group>
                                <ReCAPTCHA
                                    className="g-recaptcha"
                                    sitekey="XXXXXXXXXXXXXXXXXXX"
                                    onChange={this.onChange}
                                    theme="dark"
                                />
                                { this.state.verified ? <p id="error" className="error">{this.state.reply}</p> : null }
                                { this.state.showSuccess ? <p id="success" className="success">Thank you, we will be in touch asap.</p> : null }
                                <Button id="submit" variant="primary" type="submit">
                                    Submit
                                </Button>
                            </Form>
                        </Col>
                    </Row>
                </Container>
            </section>
        )
    }
}

export default Contact

Желаемое поведение

Я использую react-google-recaptcha (https://www.npmjs.com/package/react-google-recaptcha) для проверки Recaptcha и вставляю компонент в верхней части кнопки отправки:

<ReCAPTCHA
    className="g-recaptcha"
    sitekey="XXXXXXXXXXXXXXXXXXXXX"
    onChange={this.onChange}
    theme="dark"
/>

Функция onChange должна установить state.verfied == true

onChange = (value) => {
    console.log("Captcha value:", value);
    this.setState({
        verified: true
    })
};

, чтобы эта часть handledSubmit() срабатывала, если reCaptcha была завершена и форма была отправлена ​​без перезагрузки страницы:

if (this.state.verified) {
    fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
    })
    .then(this.handleSuccess)
    .catch(error => alert(error))
    event.preventDefault()
}

в противном случае он должен отобразить this.state.reply: "Please verify the ReCaptcha." над кнопкой отправки.

Что он делает вместо

Кнопка отправки работает без завершения reCaptcha и отправляет форму. Он перезагружает страницу до http://localhost:8000/?name=Test&email=test&company=test&content=test&g-recaptcha-response=

Я знаю, что мой обходной путь с использованием состояния, вероятно, не является правильным способом использования этого модуля, но документы react-google-recaptcha не оставляют намеков на то, как правильно интегрировать проверку с API reCaptcha.

Рад за любую поддержку по этому поводу. Спасибо!