index.tsx

   const initialValues = {
      name:"Jesse",
      email:"jesse@jesse.com",
      pets:["felix"],
      accept:false

   }

   const validation = yup.object().shape({
      name: yup.string().required("This field is required"),
      email: yup.string().email("This field must be a valid e-mail").required("This field is required"),
      pets: yup.array(yup.string().required("This field is required")),
      accept:yup.bool().oneOf([true], 'Field must be checked')
   })

   function ControlledForm(){

      const [{values, reset},{input}] = useForm({debounce:300, initialValues, validation})
      return (
         <>
            <input {...input("name", "text")}/>
            <span>{touched.name && errors.name}</span>
            <input {...input("email" ,"email")}/>   
            <span>{touched.email && errors.email}</span>         
            <input {...input("pets.0" ,"text")}/>     
            <span>{touched.pets?.[0] && errors.pets?.[0]}</span>    
            <input {...input("accept", "checkbox")}/>
            <span>{touched.accept && errors.accept}</span>    
         </>   
      )
   }