How to validate useFieldArray with Mui v5 using yup schemaValidator

[DanPresa]

Hello everyone.
I'm trying to validate fields that they are nested in array. the fields are made with Mui (V5).

I'd like to validate them with yupResolver here it is my code:

https://codesandbox.io/s/validate-array-yup-react-hook-form-fjwmvy?file=/src/FriendsForm.tsx

I'm only able to validate fields that they are not nested in arrays

[bluebill1049]

Do you mean on the group fields level? you may have to use trigger as hook form focus on the field validation level by default.

[Phibee]

@DanPresa , Hi bro, I was able to fixed your problem. please see the link below. Let me know if it works on your end. Thanks

Code:

https://codesandbox.io/s/validate-array-yup-react-hook-form-forked-z5v3z9

[bluebill1049]

thank you for the help @Phibee 🙏

[Phibee]

thank you for the help @Phibee 🙏

Most welcome @bluebill1049. Thanks as well 🙏. it's a pleasure helping my fellow developers 😊.

[DanPresa]

That works amazing, I don't know how to say thank you!!!.
What did you do?

[jefersonpmatos]

Bro, you saved me! I was struggling to use TS with yup, hook form, and useFieldArray, and nothing was working. Until I saw your answer and this line of code:
export type IFormInput = InferType<typeof yupSchema>
That solved all the typing problems like magic.