react-hook-form: how to use triggerValidation with useEffect

I want to run validation ckecks and display errors when the screen is initially displayed. ■what I use: react, react-hook-form, typescript ■detail: there are multiple inputs to check. Currently, no error is displayed unless 『setTimeout』is used. isLoaded is true if data is fetched. I think the timing of error display and readering is a problem. I don’t want to use setTimeout. Do you know any ideas, please help.(enough information?)

function RootComponent (props) {

 useEffect(() => {
  setTimeout(() => {
   triggerValidation();
  }, 1000);
 }, [props.payload.isLoaded);

 const REQUIRED_VALIDATE = { required: { value: true, message: REQUIRED_MESSAGE } };
 const REGEX_NAME_NOT_EMPTY_VALIDATE = {
  pattern: { value: /\S+/, message: REQUIRED_MESSAGE },
 };

 return (
  <React.Fragment>
   <TextField error={!!errors.familyName} name="familyName"
    inputRef={register(
     required: REQUIRED_VALIDATE.required,
     pattern: REGEX_NAME_NOT_EMPTY_VALIDATE.pattern,
    )} />
    ・・・and more
  </React.Fragment>
 );
}