react-hook-form validate that password match (failing) - react-hook-form

Question

I am using react-hook-form to validate that my password and confirm password are the same. For some reason, the form elements aren't validating. I confirmed with a console.log that the reference and the confirm password are the same, but it is failing anyways. It all seems fine, where have I gone wrong?
Code
const { setValue, register, getValues, handleSubmit, watch, formState: { errors } } = useForm();
const password = useRef({});
password.current = watch("password", "");
const selectType = watch("type", '');
<IonItem >
<IonLabel position="floating">Password</IonLabel>
<IonInput type="password" {...register("password", { required: 'Password is required' })}/>
</IonItem>
<IonItem >
<IonLabel position="floating">Confirm Password</IonLabel>
<IonInput type="password" {...register("password_repeat", { validate: value => value === password.current || "The passwords do not match" })}/>
</IonItem>

Answer 1

The problem is that the interface for <IonInput /> is different from the one register expects. With the spreading of register you're linking an onChange handler to update RHF's form state of that field. <IonInput /> uses a change handler called ionChange instead.
As a rule of thumb you should use RHF's <Controller /> when working with external controlled components.
const { control, handleSubmit, watch, formState: { errors } } = useForm();
const password = watch("password", "");
<Controller
control={control}
name="password"
rules={{ required: "Password is required" }}
render={({ field }) => (
<IonItem>
<IonLabel position="floating">Password</IonLabel>
<IonInput
value={field.value}
ionChange={field.onChange}
ionBlur={field.onBlur}
onFocus={field.onFocus}
ref={field.ref}
type="password"
/>
</IonItem>
)}
/>
<Controller
control={control}
name="password_repeat"
rules={{
required: "Password is required",
validate: (value) =>
value === password|| "The passwords do not match"
}}
render={({ field }) => (
<IonItem>
<IonLabel position="floating">Password</IonLabel>
<IonInput
value={field.value}
ionChange={field.onChange}
ionBlur={field.onBlur}
onFocus={field.onFocus}
ref={field.ref}
type="password"
/>
</IonItem>
)}
/>