dynamic required on load

[travisboss]

Looking on how to get this function to check at page load

const commPreferredMethod = (type: string) => {
  const fieldValue = watch('contactMethod');
  return fieldValue === type;
};

<TextInputField
  isRequired={comPreferredMethod('2')}
  defaultValue={apiData.data.homePhone}
  validationRegister{register('phoneHome', {
  required: commPreferredMethod('2'),
 })}
/>

What is happening is if a user makes a specific selection on SelectField they get a required on a TextField, however if the data back from the api in the SelectField` is one that is required the input does not update to keep the field required, it simply goes back to optional no matter the value. But if a user makes a change to any field it will update is requested.

[travisboss]

Wanted to add it looks like watch offers undefined on page load which seems to be my issue, since I am getting this data from an api from other examples I am unsure on how to set that on load or after load? I see reset or setValue but am confused on how to implement.

Our current call is:

useEffect(() => {
if (!isEligibilityLoading) {
   fetchData();
   getStates();
 }
 return() => {
    controller.abort();
    statesController.abort();
 };
}, [isEligibilityLoading]);

Would I just create another useEffect with a reset call?