I am using React-Hook-Forms and I have a custom component for my input:

   export default function Input({
  name,
  label,
  value,
  placeholder,
  register,
  ...props
}: IProps) {
  const { control } = useForm();

  return (
    <div className="inputDefaultContainer ">
      <label htmlFor={name}>{label}</label>
      <input
        type="text"
        ref={register}
        name={name}
        className="poppins my-2"
        placeholder={placeholder}
        value={value}
        {...props}
      />
    </div>
  );
} 

I am using this in my form (which have more fields, that are similar to the Input):

const { control, handleSubmit, register } = useForm();
<form onSubmit={handleSubmit(postData)}>
          <div className="input-box">
            <Input
              name="precoProduto"
              label="Preço:"
              register={register}
              placeholder="R$ 00,00"
            />   
          </div>
        <div className="save">
          <SaveBtn />
        </div>
      </form>

The when I try to use the "Register" is getting the following error. Can you help me to resolve this?

get.ts:11 Uncaught TypeError: path.split is not a function
at get (get.ts:11:1)
at register (createFormControl.ts:924:1)
at commitAttachRef (react-dom.development.js:20875:1)
at commitLayoutEffects (react-dom.development.js:23431:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at commitRootImpl (react-dom.development.js:23151:1)
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)