title: Create nested form using react js
body: <p>I use ant design in my application, where i use dynamic form.  Users can add how many descendant forms they want.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;Form
        name="dynamic_form_item"
        {...formItemLayoutWithOutLabel}
        onFinish={onFinish}
      &gt;
        &lt;Form.List name="names"&gt;
          {(fields, { add, remove }) =&gt; {
            return (
              &lt;div&gt;
                {fields.map((field, index) =&gt; (
                  &lt;Form.Item
                    {...(index === 0
                      ? formItemLayout
                      : formItemLayoutWithOutLabel)}
                    label={index === 0 ? "Passengers" : ""}
                    required={false}
                    key={field.key}
                  &gt;
                    &lt;Form.Item
                      {...field}
                      validateTrigger={["onChange", "onBlur"]}
                      rules={[
                        {
                          required: true,
                          whitespace: true,
                          message:
                            "Please input passenger's name or delete this field."
                        }
                      ]}
                      noStyle
                    &gt;
                      &lt;Input
                        placeholder="passenger name"
                        style={{ width: "60%" }}
                      /&gt;
                    &lt;/Form.Item&gt;
                    &lt;InnerForm /&gt;  //my inner form
                    {fields.length &gt; 1 ? (
                      &lt;MinusCircleOutlined
                        className="dynamic-delete-button"
                        style={{ margin: "0 8px" }}
                        onClick={() =&gt; {
                          remove(field.name);
                        }}
                      /&gt;
                    ) : null}
                  &lt;/Form.Item&gt;
                ))}
                &lt;Form.Item&gt;
                  &lt;Button
                    type="dashed"
                    onClick={() =&gt; {
                      add();
                    }}
                    style={{ width: "60%" }}
                  &gt;
                    &lt;PlusOutlined /&gt; Add field
                  &lt;/Button&gt;
                &lt;/Form.Item&gt;
              &lt;/div&gt;
            );
          }}
        &lt;/Form.List&gt;
  
        &lt;Form.Item&gt;
          &lt;Button type="primary" htmlType="submit"&gt;
            Submit
          &lt;/Button&gt;
        &lt;/Form.Item&gt;
      &lt;/Form&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The idea of the application is next:<br>
  User click on <code>add field</code> and appears an input where he can add a value, also appears another button with <code>add inner field</code> where user also can add another data.
  Now the application works and when i save each form, i get the value, but also i get a warning: <code>validateDOMNesting(...): &lt;form&gt; cannot appear as a descendant of &lt;form&gt;</code>, which means that i can't use inner form inside the main how i understand. But how to solve this issue and to make disappears the warning?
  <br> demo: <a href="https://codesandbox.io/s/ecstatic-paper-0933k?file=/index.js:677-2823" rel="nofollow noreferrer">https://codesandbox.io/s/ecstatic-paper-0933k?file=/index.js:677-2823</a></p>