Validation with yup failed for generic react hook form component

Issue

I am trying to make generic component for text input for react hook form.
Here is the link to sandbox:
https://codesandbox.io/s/eager-https-0osjz?file=/src/App.tsx Problem is with validation and it started when I moved code to separate component.
What I did wrong here?
I suspect that I make some issue with TS as I am using it first time.

Solution

There is severals problems:

• you're using two useForm instead of one, that's why errors aren't displayed and form isn't submitted
• Controller need control props to work, you can get control from useForm and pass it down to child components or retrieve it with useFormContext

Your working example: https://codesandbox.io/s/quizzical-alex-d7gpn?file=/src/App.tsx

Answered By - Joris