我已经安装了react-hook-recaptcha软件包以将其添加到我的新闻稿表单中。然而，从示例来看，代码似乎已经过时了，复制/粘贴示例代码部分会导致未定义的变量和函数。关于如何使用最新的react-hook-form实现它，Google上没有太多信息。
我已经导入了useRecaptcha函数和2个常量，一个用于siteKey，另一个用于横幅应该附加的ID。
这是我的代码，但我不知道如何使它工作，因为没有太多关于如何做到这一点的信息。

"use client"

import { useCallback, useEffect, useState } from "react"

import { useForm, SubmitHandler } from "react-hook-form"

import { useRecaptcha } from "react-hook-recaptcha"

import { cn } from "@/lib/utils"

import { z, ZodType } from "zod"

import Alert from "./Alert"
import Button from "./Button"
import { zodResolver } from "@hookform/resolvers/zod"

const Newsletter = () => {
  const [isSubmitted, setIsSubmitted] = useState<boolean>(false)
  const [contact, setContact] = useState<Newsletter>({
    email: ""
  })

  const sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" // change to your site key
  const containerId = "test-recaptcha" // this id can be customized

  const schema: ZodType<Newsletter> = z.object({
    email: z.string().email({ message: "Ongeldig e-mailadres" })
  })

  const {
    register,
    handleSubmit,
    reset,
    clearErrors,
    formState: { errors, isSubmitSuccessful }
  } = useForm<Newsletter>({
    resolver: zodResolver(schema),
    reValidateMode: "onSubmit"
  })

  const handleInputChange = (e: FormEvent) => {
    setContact({
      ...contact,
      [e.currentTarget.name]: e.currentTarget.value
    })

    clearErrors("email")
  }

  const onSubmit: SubmitHandler<Newsletter> = useCallback((data) => {
    return new Promise<void>((resolve) => {
      resolve()

      setIsSubmitted(true)
    })
  }, [])

  const onFormValidate = useCallback(() => {
    if (errors.email) {
      setIsSubmitted(false)
    }

    if (isSubmitSuccessful) {
      setIsSubmitted(true)

      reset({
        email: ""
      })

      setContact({
        email: ""
      })
    }
  }, [errors, isSubmitSuccessful, reset])

  useEffect(() => {
    onFormValidate()
  }, [onFormValidate])

  const email = register("email")

  return (
    <div className="text-midnight bg-accent sm:rounded-2xl">
      <div className="flex flex-col flex-wrap content-center justify-center pt-6 pb-12 mx-auto md:py-12">
        <h2 className="text-3xl leading-none text-center sm:text-5xl lg:text-6xl font-playfair">
          Stay in the loop!
        </h2>

        <p className="max-w-lg pt-4 pb-8 mx-auto text-center text-md">
          Houd ons in de gaten, misschien staan we binnenkort bij jou in de
          buurt of op een festival!
        </p>

        <form
          autoComplete="off"
          className="space-y-3"
          onSubmit={handleSubmit(onSubmit)}
        >
          <div className="flex flex-col sm:flex-row">
            <input
              {...email}
              onChange={handleInputChange}
              value={contact.email}
              className={cn(
                errors.email
                  ? "placeholder:text-red-800 border-red-800"
                  : "placeholder:text-midnight border-midnight",
                "flex-grow p-3 bg-white border-1 text-sm md:text-base outline-none rounded-tl-lg rounded-tr-lg sm:rounded-tr-none sm:rounded-br-none sm:rounded-l-lg text-midnight placeholder:text-midnight focus:outline-none"
              )}
              placeholder="e-mailadres..."
            />

            <Button
              buttonType="submit"
              text="Versturen"
              buttonClass="btn-secondary border-2 rounded-tl-none rounded-tr-none sm:rounded-tr-lg sm:rounded-bl-none px-7 rounded-lg"
            />
          </div>

          {errors.email && (
            <p className="text-xs font-bold text-red-800">
              {errors.email.message}
            </p>
          )}

          {isSubmitted && (
            <Alert
              type="success"
              message={`Bedankt voor het aanmelden van ons nieuwsbrief`}
            />
          )}
         <div id={containerId} />
        </form>
      </div>
    </div>
  )
}

export default Newsletter