[Modal] Inputs cleared on validation when using Form inside a Modal

[paambaati]

Describe the bug
When using a <Form> component inside a <Modal>, and when using a library like react-hook-form for validations, all inputs get cleared and the validation message is shown on the wrong field on form submit.

Expected Behavior
The error should be shown for the correct field, and inputs should not be cleared on tabbing from 1 field to another.

To Reproduce

See https://codesandbox.io/s/stupefied-poitras-11y82?file=/src/App.js - and its fullscreen version - https://11y82.csb.app/

The issue is evident in the fullscreen version -

1. Click button to open modal.
2. Enter only 1 input, and click on the Submit button.
3. Watch both fields show error messages, and both inputs being cleared.

Suggested solution(s)
Honestly, I don't know. I'm creating this issue as a starting point so I can collect more information about why this happens.

Desktop (please complete the following information):

• OS: macOS 10.14.6
• Browser Chrome 85.0.4158.4
• Version @chakra-ui/core 0.8.0, Node 14.1.0

Additional context
I'm not sure if this is a bug on the RHF side, but I did try to isolate the issue by building another CodeSandbox with the same kind of logic (without Chakra-UI) and it seems to work fine - see https://codesandbox.io/s/sleepy-diffie-kuwxx?file=/src/App.js:360-411

[paambaati]

Not a Chakra-UI issue — discussion here - react-hook-form/react-hook-form#1744 (comment).