Javascript 类型错误：can'；“定义财产”；当前引用（&Q）：对象不可扩展

我有一个react组件输入字段：

导出默认函数InputField（{name，type，placeholder，className}，ref）{
返回(
);
}

我尝试将它放在另一个组件LoginForm中，在其中我使用react hook form来处理我的表单挂钩：

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

(some code ... )

const { register, handleSubmit } = useForm();

<InputField
        name='password'
        type='password'
        placeholder='Password'
        ref={register}
/>

从'react hook form'导入{useForm}；
（一些代码…）
常量{register，handleSubmit}=useForm（）；

但我得到了这个错误： 类型错误：无法定义属性“当前”：对象不可扩展

您需要使用属性

ref

才能在函数组件中有效：

function InputField({ name, type, placeholder, className }, ref) {
  return (
    <input
      name={name}
      type={type}
      placeholder={placeholder}
      className={`py-2 text-cTxt placeholder-gray-400 bg-transparent border-b-2 my-5 border-cBtn rounded px-2 ${className}`}
      ref={ref}
    />
  );
}

export default React.forwardRef(InputField);

函数输入字段（{name，type，placeholder，className}，ref）{
返回(
);
}
导出默认React.forwardRef（InputField）；

请显示所有相关代码，以制作一个可复制的示例，

input

中的

ref

来自哪里？我编辑了我的问题，现在您可以看到我的组件的第一行了

function InputField({ name, type, placeholder, className }, ref) {
  return (
    <input
      name={name}
      type={type}
      placeholder={placeholder}
      className={`py-2 text-cTxt placeholder-gray-400 bg-transparent border-b-2 my-5 border-cBtn rounded px-2 ${className}`}
      ref={ref}
    />
  );
}

export default React.forwardRef(InputField);