react-google-recaptcha Uncaught TypeError

如何解决react-google-recaptcha Uncaught TypeError

我不明白为什么我的组件没有按预期工作。 由于未捕获的类型错误，reCAPTCHA 无法验证。单击复选框时 reCAPTCHA 开始验证，但因控制台中的错误消息而中断。

我也关注了 this guide 但我遇到了同样的错误。我绝对不确定问题出在哪个级别。同样的实现在 GatsbyJS 中按预期工作。

如果您能帮助我调试问题或为我指明正确的方向，我将不胜感激。

我的组件

const ContactForm = () => {
  const [state,setState] = useState('');
  const [buttondisabled,setButtondisabled] = useState(true);
  const recaptchaRef = createRef();

  const encode = (data) => {
    return Object.keys(data)
      .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
      .join('&');
  };

  const handleChange = (e) => {
    setState({ ...state,[e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    const recaptchaValue = recaptchaRef.current.getValue();
    fetch('/',{
      method: 'POST',headers: { 'Content-Type': 'application/x-www-form-urlencoded' },body: encode({
        'form-name': form.getAttribute('name'),'g-recaptcha-response': recaptchaValue,...state,}),})
      .then(() => {
        e.target.reset();
        alert('Message sent');
      })
      .catch((error) => alert(error));
  };

  return (
    <SectionWrapper id='contact'>
      <GlitchTitle content='Contact Me'/>
      <StyledForm
        className='flex flex-col w-2/4 justify-center items-center'
        name='contact-form'
        method='POST'
        data-netlify='true'
        onSubmit={handleSubmit}
      >
        <input type='hidden' name='form-name' value='contact-form'/>
        <input
          id='text-input'
          type='text'
          name='name'
          placeholder='Name'
          onChange={handleChange}
          required
        />
        <input
          id='email-input'
          type='email'
          name='email'
          placeholder='Email'
          onChange={handleChange}
          required
        />
        <textarea
          className=''
          id='textarea'
          type='text'
          name='message'
          placeholder='Message'
          onChange={handleChange}
          rows={5}
          maxLength={350}
          required
        />
        <button
          className='border-2 m-3 w-1/2 disabled:opacity-40'
          type='submit'
          disabled={buttondisabled}
        >
          Submit
        </button>
        <ReCAPTCHA
          ref={recaptchaRef}
          sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
          id='recaptcha'
          onChange={() => setButtondisabled(false)}
        />
      </StyledForm>
    </SectionWrapper>
  );
};