Sharing the same `FormInstance` between multiple different forms

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)

Reproduce the shared-instance behavior in the linked CodeSandbox, then inspect src/Form.tsx around line 94 where callbacks are overwritten. Compare validation and callback behavior across both forms, and define completion as a tested, documented resolution for sharing one FormInstance between multiple Form components.