Soy nuevo en reaccionar en forma de gancho. Estoy pegando mi código a continuación

 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;

Cuando envío el formulario, no obtengo ningún resultado en la consola. También estoy recibiendo una advertencia como

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

¿Cuál es el problema aquí?

Gracias