I am building a contact page and the lead developer wants me to use Joi to validate inputs. This is the first time I am using this specific form validator. My form has a few animations that should fire when the form field receives focus and when the form input is valid. My problem is that Joi seems to add a default value to the fields and so the input is always valid. Is there a way to prevent this from happening?

Here is my code for one of the input forms

<div className={scss.col}>
 <input type="text" autoComplete="off" {...register("name", {required: true})}/>
 <label htmlFor="name" className={scss.labelName}>
   <span className={scss.contentName}>Name</span>
 </label>
 <p className={errors.name ? scss.error : undefined}>
  {errors.name?.message}
 </p>
</div>

EDIT: I tried to just declare a default value of null for the input fields but I am using typescript and I get the following error message:

Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2322) index.d.ts(2202, 9): The expected type comes from property 'value' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'