I am trying to implement react-google-recaptcha-v3, but useGoogleReCaptcha() always returns undefined.

When I fill out the information for the form and click submit, I always get the alert('reCAPTCHA verification failed. Please try again.'); message. When I check the console I see Execute reCAPTCHA not yet available. If I console.log(executeReCaptcha); at the beginning of handleReCaptchaVerify, it just says undefined. I’m not sure what I’m doing wrong.

I’ve triple check the environment variables, and even tried to put the values directly into their respective fields, but I am still getting undefined for the value of executeReCaptcha.

Documentation also states “The executeRecaptcha function returned from the hook can be undefined when the recaptcha script has not been successfully loaded. You can do a null check to see if it’s available or not.” But why would it not successfully load? Is this an error in my implementation?

import axios from 'axios';
import React from 'react';
import { GoogleReCaptchaProvider, useGoogleReCaptcha } from 'react-google-recaptcha-v3';
import BottomContent from '../components/bottomContent';
import '../styles/contact.css';

function Contact() {
  const { executeReCaptcha } = useGoogleReCaptcha();

  const handleReCaptchaVerify = async () => {
    console.log(executeReCaptcha);
    if (!executeReCaptcha) {
      console.log('Execute reCAPTCHA not yet available');
      return null;
    }

    try {
      const token = await executeReCaptcha('submit');
      console.log('Verified token:', token);
      return token;
    } catch (error) {
      console.error('Error executing reCAPTCHA:', error);
      return null;
    }
  };

  const handleSubmit = async (event) => {
    event.preventDefault();

    const token = await handleReCaptchaVerify();
    if (!token) {
      alert('reCAPTCHA verification failed. Please try again.');
      return;
    }

    const formData = new FormData(event.target);
    const data = {
      name: formData.get('name'),
      email: formData.get('email'),
      subject: formData.get('subject'),
      message: formData.get('message'),
      recaptchaToken: token,
    };

    try {
      await axios.post('/api/send-email', data);
      alert('Your message has been sent!');
      event.target.reset();
    } catch (error) {
      console.error('Error sending message:', error);
      alert('Failed to send message. Please try again later.');
    }
  };

  return (
    <GoogleReCaptchaProvider reCaptchaKey={process.env.REACT_APP_RECAPTCHA_KEY}>
      <div className="ContactPage">
        <div className="showuppls">
          <h1 className='ContactHeader'>CONTACT US</h1>
          <div className='ContactDesc'><p>Reach out with your questions/inquiries about graphic design, photography & videography here!</p></div>
        </div>
        <div className="formContainer">
          <form onSubmit={ handleSubmit }>
            <div className="formRow">
              <div className="formLeft">
                <label htmlFor="name">NAME</label>
                <input type="text" id="name" name="name" required />
                <label htmlFor="email">EMAIL</label>
                <input type="email" id="email" name="email" required />
                <label htmlFor="subject">SUBJECT</label>
                <input type="text" id="subject" name="subject" />
              </div>
              <div className="formRight">
                <label htmlFor="message">YOUR MESSAGE</label>
                <textarea id="message" name="message" required></textarea>
              </div>
            </div>
            <button type="submit">SUBMIT</button>
          </form>
        </div>
        <BottomContent />
      </div>
    </GoogleReCaptchaProvider>
  );
}

export default Contact;