Getting "Cannot read properties of `null` (reading `useRef`)" Only When Using ReCAPTCHA Component

react-google-recaptcha version: 3.1.0
react-async-script version: 1.2.0

---
Hello! I've been trying to get this working since yesterday and I am left scratching my head as to what could possibly be happening. For context, building a React + Astro website.

Firstly, my module which is using the `ReCAPTCHA` component:

```js
import emailjs from '@emailjs/browser';
import React, { useEffect } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

import { Section } from '../Section';

const AboutMeContact = () => {
const form = React.useRef();
const recaptchaRef = React.useRef();

const [showPopup, setShowPopup] = React.useState(false);
const [animateContents, setAnimateContents] = React.useState(false);
const [sending, setSending] = React.useState(false);

useEffect(() => {
setTimeout(() => {
setAnimateContents(showPopup);
}, 10);
}, [showPopup]);

const handleSubmit = (e: React.FormEvent) => {
const serviceId = 'contact-saidk';
const templateId = 'template_4akaltp';
const publicKey = 'PPTQzYEGERUyGNf3B';

e.preventDefault();

const recaptcha = recaptchaRef.current.executeAsync();
setSending(true);
emailjs.sendForm(serviceId, templateId, form.current, publicKey).then(
() => {
form.current.reset();
setShowPopup(true);
setTimeout(() => setShowPopup(false), 2000);
setTimeout(() => {
setAnimateContents(false);
setSending(false);
}, 1800);
},
(error) => {
setSending(false);
console.log(error.text);
},
);
};

return (