react hook form - change style to input - reactjs

Question

I have validation that displays an error message, how to make the input border red when the form is incorrectly filled?
<div className={styles["form-group"]}>
<label>
Temat
</label>
<input
{...register("temat", { required: ErrorType.REQUIRED })}
className={styles.input}
/>
<p className={styles.invalid}>{errors?.temat?.message}</p>
</div>
how will i use it:
style={{ border: errors.temat?.message ? '1px solid red' : '' }}
the input turns red after clicking the submit button

Answer 1

Try to change mode on useForm. It works for me.
useForm({
mode: 'onChange',
...
})

Answer 2

Add a className for errors on the input element:
<div className={styles["form-group"]}>
<label>
Temat
</label>
<input
{...register("temat", { required: ErrorType.REQUIRED })}
className={`${styles.input} ${styles.errors}`}
/>
<p className={styles.invalid}>{errors?.temat?.message}</p>
</div>
or look use a library like classnames

Answer 3

A: You have to use conditional classes
className={ errors?.myInput?.message ? styles["error"] : "no-error" }
in this example I am using scss modules so i'll type the classNames as follow styles["myClassName"]
<input
id="accountReference"
className={
errors?.accountReference?.message ? styles["error"] : "no-error"
}
{...register("accountReference", {
required: "Account reference is required",
})}
/>
scss
input {
border-radius: 8px;
background-color: var(--100);
border: 2px solid var(--300);
padding: 8px 12px;
&.error {
border: 2px solid var(--error);
}
}
or you could do it in css
input {
border-radius: 8px;
background-color: black;
border: 2px solid black;
padding: 8px 12px;
}
input.error {
border: 2px solid red;
}