Using useEffect in react js to sent google rechaptha token

Question

Hi i want implementation google rechapta using react, this is my react code

import { useForm } from 'react-hook-form';
import { useHistory } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import swal from 'sweetalert';
import ReCAPTCHA from "react-google-recaptcha";

const ContactForm = (props) => {
    const {submitBtnClass } = props;
    const { register, handleSubmit } = useForm();
    const [token, setToken] = useState();
    const history=useHistory();
    const recaptchaRef = React.useRef();

    function onChange(value) {
        console.log("Captcha value:", value);
        setToken(value);
    }

    useEffect(()=>{
        document.getElementById("contact_tokenVal").value = token;
        //const value = props.value
        //setToken(value) 
    },[token]);

    const onSubmit = data_api => {
        axios
            .post('http://localhost/erlanggastudio-rest-api/contact.php',data_api)
            .then(res=>{
               console.log(data_api);
               history.push('/onepage-3');
               swal(res.data.title, res.data.text, res.data.icon);
            })
            .catch(err => {
                console.log(err);
            });
    };


    return (
        <form id="contact-form" onSubmit={handleSubmit(onSubmit)}>
            <div className="row">
                <div className="col-md-6 mb-30">
                    <input className="from-control" type="text" id="contact_name" name="contact_name" placeholder="Nama" {...register('contact_name')} required />
                </div>

                <div className="col-md-6 mb-30">
                    <input className="from-control" type="text" id="contact_email" name="contact_email" placeholder="E-Mail" {...register('contact_email')} required />
                </div>

                <div className="col-md-6 mb-30">
                    <input className="from-control" type="text" id="contact_mobilephone" name="contact_mobilephone" placeholder="No Telepon" {...register('contact_mobilephone')} required/>
                </div>

                <div className="col-md-6 mb-30">
                    <input className="from-control" type="text" id="contact_website" name="contact_website"  placeholder="Website Anda" {...register('contact_website')} />
                </div>

                <div className="col-12 mb-30">
                    <textarea className="from-control" id="contact_message" name="contact_message" placeholder="Isi Pesan" {...register('contact_message')} required ></textarea>
                </div>

                <div className="col-12 mb-30">
                    <input className="from-control" type="hidden" id="contact_serverKey" name="contact_serverKey"  value="6Lea50IhAAAAAAtfj-sElz7biY8WlDgrNwy7M7Tx" {...register('contact_serverKey')} />
                    <input className="from-control" type="hidden" id="contact_siteKey" name="contact_siteKey"  value="6Lea50IhAAAAAEgdIvB6xUJ8KJCUyO-xKpPnA0fO" {...register('contact_siteKey')} />
                    <textarea className="from-control"  id="contact_tokenVal" name="contact_tokenVal" defaultValue={token} {...register('contact_tokenVal')} />
                </div>

                <div className="col-md-6 mb-30">
                <ReCAPTCHA
                    ref={recaptchaRef}
                    sitekey="6Lea50IhAAAAAEgdIvB6xUJ8KJCUyO-xKpPnA0fO"
                    onChange={onChange}
                />
                </div>
            </div>
            <div className="btn-part">
                <button className={submitBtnClass ? submitBtnClass : 'readon learn-more submit'} type="submit">Kirim</button>
            </div>
        </form>
    );

}

export default ContactForm;

when the code running the view is like this :

i want to sent rechapta token using <textarea className="from-control" id="contact_tokenVal" name="contact_tokenVal" defaultValue={token} {...register('contact_tokenVal')} /> after user klik rechapta, end will sent to server using axios, but i have some problem when sent the data to API Server using axion the rechapta token is blank like this screenshot :

my question is how to sent the rechapta token?, i'm using document.getElementById in useEffect, but still the value after sent is blank