I use react-hook-form for validation. If formState.isValid is false, submit button is disabled. It's working if I don't select an option formState.isValid is return false. But controller don't giving an error. How can I get it to give an error message? Here is the controller code
const { register, errors, formState, control } = useForm({
mode: "all"
});
function changeValue(inputValue) {
onChange({ key: "expiryMonth", value: inputValue.value });
}
...
{errors.expiryMonth && <span className="input__error-message">required.</span>}
<Controller
name="expiryMonth"
defaultValue={null}
control={control}
value={expiryMonth}
render={({ onChange }) => <Select isSearchable={false} placeholder="Month" onChange={(inputValue) =>
onChange({ value: changeValue(inputValue) })} options={months} />}
rules={{ required: true }}
register={register}
/>