FormField doesn't work with CustomComponent after updating to v2.11.3

Expected Behavior

FormField should work with CustomComponent

Actual Behavior

After updating to v2.11.3, after typing one character in a custom text input, I can no longer type any other character. After spending some time debugging, I noticed that by adding the value property to the Form component fixes it.

This, however, introduces a warning.

Warning: Cannot update a component (`Form`) while rendering a different component (`TextInput`). To locate the bad setState() call inside `TextInput`, follow the stack trace as described in https://fb.me/setstate-in-render

URL, screen shot, or Codepen exhibiting the issue

You can try it out here https://codesandbox.io/s/grommet-sandbox-vso4c. Try removing the value from From and notices that you can no longer type in the CustomComponent

Steps to Reproduce

1. Add a CustomComponent to a FormField
2. Make sure value property is not set for the Form
3. Try to type in the CustomComponent, this wouldn’t work.
4. Add value to the Form component and you will be able to type
5. Open your console, reload and type again
6. You will see the warning message written above

Your Environment

• Grommet version: 2.11.3
• Browser Name and version: Chrome Version 80.0.3987.149 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): macOS Catalina version 10.15.3 (Desktop)

[ericsoderberghp]

The warning in the above sandbox is due to: const [name, setName] = useState(); not specifying an initial value. If I change that line to be const [name, setName] = useState(''); instead, the warning is removed. This is due to name now having an initial value of ‘’ instead of undefined.

[hoshomoh]

Any update on this issue?