javascript - Làm thế nào để react-hook-form yêu cầu 1 hộp kiểm?

Tôi có một thành phần Checkbox hoạt động tốt, cho đến khi tôi có một schema Yup:

const Checkbox = React.forwardRef(
  (
    {
      label,
      name,
      value,
      onChange,
      defaultChecked,
      errors,
      onBlur,
      ...rest
    }: any,
    forwardedRef: any
  ) => {
    return (
      <div className="grow w-full">
        <label htmlFor={name}>{label}</label>
        <input
          type="checkbox"
          value={value}
          name={name}
          onChange={onChange}
          onBlur={onBlur}
          ref={forwardedRef}
          {...rest}
        />
        {errors && <p className="error">{errors.message}</p>}
      </div>
    );
  }
);

Mà tôi sử dụng như sau:

export default function App() {
  const {
    handleSubmit,
    register,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data: any) => {
    console.log("clicked");
    console.log(errors, "errors");
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Checkbox
        {...register("name", { required: "This is required." })}
        name={"name"}
        value={"test"}
        label={"Test"}
        errors={errors.name}
      />
      <Checkbox
        {...register("name", { required: "This is required." })}
        name={"name"}
        value={"test"}
        label={"Test"}
        errors={errors.name}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Khi tôi đi nộp mẫu đơn của mình, tôi nhận được lỗi sau:

name must be a `array` type, but the final value was: `null` (cast from the value `false`). If "null" is intended as an empty value be sure to mark the schema as `.nullable()`

Đây là hộp cát của tôi

Đây là đoạn mã tôi đã theo để đến giai đoạn này - đối với tôi nó trông giống nhau? Không thể thấy tôi đã sai ở đâu ở đây