React-hook-form v7 -不能为自定义输入警告函数组件提供引用

import { useController } from 'react-hook-form';

const CustomInput = ({ name, control }) => {
  const {
    field: { ref, ...inputProps },
    fieldState: { invalid, error },
  } = useController({
    name,
    control,
    rules: { required: true },
  });

  return (
    <div>
      <input ref={ref} {...inputProps} />
      {invalid && <span>{error?.message}</span>}
    </div>
  );
};

const MyForm = () => {
  const { control, handleSubmit } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <CustomInput name="customInput" control={control} />
      <button type="submit">Submit</button>
    </form>
  );
};