Form onSubmit affects all the Form components

[LuisBrime]

Hi, I've been using grommet-controls in a personal project where a have a Register form to add students to a database and then a List View where one can view and edit the students' info.

On my Register form I use the onSubmit function from the Form component but when I try to use it in another Form component it appears to be also using the data from the inputs of the other Form component.

Steps to reproduce
Using the example from grommet-controls page (https://grommet-nextjs.herokuapp.com/examples/grommet-controls/Form/_starter) I've found out that the problem happens and it takes information from other Form components of other examples.

const Demo = () => (
  <Box>
  <Form focusFirstChild={false} onSubmit={values => alert(JSON.stringify(values))}>
    <TextInputField label='Text' name='text' validation={[validators.required(), validators.minLength(8)]} />
  </Form>
  <Form focusFirstChild={false} onSubmit={values => alert(JSON.stringify(values))}>
    <TextInputField label='Text2' name='text2' validation={[validators.required(), validators.minLength(8)]} />
  </Form>
  </Box>
);

I tried using two different Form components and when one of them submits it takes the value of the other Forms.

Also I've been experiencing the same issue as in #12 and had to use an individual state for each component and handle the change in order to "remove" the readonly.

Best regards.

[atanasster]

@LuisBrime - sorry the delay was longer than I anticipated. It should now be fixed in grommet-controls 1.1.21.
To fix it, I had to remove the usage of FormState and use the react hooks and state context.
Please let me know if have any issues with the new implementation