在 React 中使用 react-phone-input-2 值和 react-hook-form 的验证错误

问：

有一个使用 react-phone-input-2 创建的输入。为了验证它，我使用 react-hook-form。发送空表单时，将进行验证。但是当我尝试在表单中输入数字时，控制台中出现错误“Uncaught （in promise） TypeError： Cannot read properties of undefined （reading 'name'）”。 我认为正在寻找 target.name，但是 react-phone-input-2 立即给出一个值，没有目标。我以为<Сomponent>可以解决这个问题，但它没有帮助。

import PhoneInput from "react-phone-input-2";
import { useForm, Controller } from "react-hook-form";
import { ErrorMessage } from "@hookform/error-message";

const onSubmit = (data) => {
    console.log(data);
 };

  const {
    field,
    register,
    handleSubmit,
    control,
    watch,
    formState: { errors },
  } = useForm({
    defaultValues: {
      name: "",
      tel: "",
    },
    criteriaMode: "all",
  });

和形式

<form onSubmit={handleSubmit(onSubmit)}>
      <div className={styles.form_tel}>
        <label className={styles.label_tel} htmlFor="phone">
          {labelTel}
        </label>

        <Controller
          control={control}
          name="tel"
          render={({ field: { ref, ...field } }) => (
            <PhoneInput
              {...field}
              id="phone"
              country="ru"
              name="tel"
              {...register("value", {
                required: "The field is required",
              })}
              inputProps={{ ref, required: true }}
              specialLabel={null}
            />
          )}
        />
        <ErrorMessage
          errors={errors}
          name="name"
          render={({ messages }) => {
            console.log("messages", messages);
            return messages ? Object.entries(messages).map(([type, message]) => <p key={type}>{message}</p>) : null;
          }}
        />
      </div>

      <button className={styles.callToAction_btn} type="submit">
        {submitBtnText}
      </button>
    </form>

我看过有关这些主题和类似问题的文章，但它们的解决方案对我没有帮助