why react-hook-form dose not work with MUI and Next Js

[nasim-alizai-pgl]

i have create a stepper component that i pass steps to to that component at MUI & next js so i want validate every step individually so it is working perfectly with getFieldState() so tha issue was that when open the stpper modal at first time the getFieldState('firstName').invalid not working an submit also but the second time when i restart my stepper it works correctly

[yasamoka]

Please provide a code example.

[nasim-alizai-pgl]

const steps = [
{
label: 'General Info',
icon: ,
step: (
<>
Step 1

<input
{...register('firstName', {
required: 'kkjhjkhkjhjk',
min: 18,
max: 99
})}
/>
{errors.firstName?.message}

</>
),
props: {
isUpdate
},
async validate() {
console.log(!getFieldState('firstName').invalid);
return !getFieldState('firstName').invalid;
}
},
]

and when i check the validation function
const submitInside = async () => {
if (active < stepInside.length - 1) {
let res = await stepInside[active].validate();
if (res) {
setLoading(active);
if (
true
// form valid
) {
let res = await submit();
console.log(res);

  // uncompleted vaasdfdfsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  setActive((active) => active + 1);
  if (res) {
  } else {
  }
}
form.clearErrors();

} else {
}
}
setLoading(null);

[nasim-alizai-pgl]

@yasamoka
did you see the codes ?