Not updating error while clicking enter

[muhammad-aatir-12]

I am using useForm for form validation in Next JS 13, and facing a issue that if a field is empty and user press enter and required is true for that field it shows error of required but when user enter something in it and then presses enter the error does not disappear until the submit button is clicked and enter only works when a event is triggered like if we click on another field then press enter, it will update the error.
Same goes with that i have validate the field of passwords with 3 regex and put it in validate function:
{...props.register(props.labelName,{
required: true,
pattern: {
value: /^.{8,}$/,
message: ${t("minChar")},
},
validate: {
hasNumbers: (value: string) => numbersRegex.test(value) || ${t("minDigit")},
lowercase: (value: string) => lowercaseRegex.test(value) || ${t("oneLowercase")},
uppercase: (value: string) => uppercaseRegex.test(value) || ${t("oneUppercase")},
specialChar: (value: string) => specialCharRegex.test(value) || ${t("oneSpecialChar")},
}
if number is missing from a password on button click it will show user the minDigit error and after that when user will enter number in the field and presses enter it will not update or remove the error until we click the submit button or an event occurs before pressing enter.

        Please propose a suitable solution to update errors on pressing enter.