Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef(). With React Hook Form

Question

I am new to react-hook-form. I am pasting my code below

import React from "react";
import { useForm } from "react-hook-form";

const Inventory = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        className="border border-gray-900 rounded-lg p-2"
        type="number"
        placeholder="Number"
        ref={register("number", { required: true })}
      />
      {errors.number && <p>This is required</p>}
      <button
        className="mt-4 text-white bg-gray-900 border-2 border-gray-900 rounded-md px-2 py-1"
        type="submit"
      >
        Add
      </button>
    </form>
  );
};

export default Inventory;

When I am submitting the form I am not getting any output in the console. Also I am getting an warning as

Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef().

What is the problem here?

Thanks

Answer 1

Ok I made a mistake in the code. I wrote this

 ref={register("number", { required: true })}

Instead of this

{...register("number", { required: true })}