Sharing the same `FormInstance` between multiple different forms

[hophiphip]

Does sharing the same FormInstance between multiple <Form /> components considered correct?

Example:

function SampleWithError() {
  const [form] = Form.useForm();

  return (
    <>
      <Form form={form}>
        <Field name="one"></Field>
      </Form>

      <Form form={form}>
        <Field name="two"></Field>
      </Form>

      <button onClick={async () => {
        console.log(await form.validateFields());
      }}>
        Validate
      </button>
    </>
  )
}

Also, some of my observations on form behavior for this particular case:

1. In the following code-sandbox form.validateFields() merges fields values from both forms. Form seems to work correctly.

2. However, callbacks: onValuesChange, onFieldsChange, onFinish and onFinishFailed are only triggered for the last form. (they get overwritten here)