title: React antd 4 Form in Modal resetFields showing wrong data
body: <p>I am having trouble understanding why I am seeing this unexpected behavior.  If I have some data that I am passing into a prop on an object that has a modal with a form done as shown below and I click on a button, then cancel, then click on a different button, the form is showing the previously clicked state each time.  Within the useEffect code, I can see that the correct person is loaded, though the form initializes the previous person.</p>
  
  <pre><code>import React, { useState, useEffect, useRef } from "react";
  import ReactDOM from "react-dom";
  import "antd/dist/antd.css";
  import "./index.css";
  import { Button, Modal, Form, Input } from "antd";
  
  const PersonEditForm = ({ person, onCreate, onCancel }) =&gt; {
    const [form] = Form.useForm();
    const prevRef = useRef();
  
    useEffect(() =&gt; {
      if (prevRef.current === null &amp;&amp; person) {
        form.resetFields();
      }
      prevRef.current = person;
    });
  
    return (
      person &amp;&amp; (
        &lt;Modal
          visible={!!person}
          title="Person Editor"
          okText="Create"
          cancelText="Cancel"
          onCancel={onCancel}
          onOk={() =&gt; {
            form
              .validateFields()
              .then(values =&gt; {
                onCreate(values);
              })
              .catch(info =&gt; {
                console.log("Validate Failed:", info);
              });
          }}
        &gt;
          &lt;Form
            form={form}
            layout="vertical"
            name="form_in_modal"
            initialValues={person}
          &gt;
            &lt;Form.Item
              name="name"
              label="Name"
              rules={[
                {
                  required: true,
                  message: "Please input the person's name!"
                }
              ]}
            &gt;
              &lt;Input /&gt;
            &lt;/Form.Item&gt;
          &lt;/Form&gt;
        &lt;/Modal&gt;
      )
    );
  };
  
  const CollectionsPage = () =&gt; {
    const [person, setPerson] = useState(null);
  
    const onCreate = values =&gt; {
      console.log("Received values of form: ", values);
      setPerson(null);
    };
  
    return (
      &lt;div&gt;
        &lt;Button
          type="primary"
          onClick={() =&gt; {
            setPerson({ name: "Bob" });
          }}
        &gt;
          Edit Bob
        &lt;/Button&gt;
        &lt;Button
          type="primary"
          onClick={() =&gt; {
            setPerson({ name: "John" });
          }}
        &gt;
          Edit John
        &lt;/Button&gt;
        &lt;Button
          type="primary"
          onClick={() =&gt; {
            setPerson({ name: "Phil" });
          }}
        &gt;
          Edit Phil
        &lt;/Button&gt;
        &lt;PersonEditForm
          person={person}
          onCreate={onCreate}
          onCancel={() =&gt; {
            setPerson(null);
          }}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;CollectionsPage /&gt;, document.getElementById("container"));
  </code></pre>
  
  <p>However, if I remove the <code>person &amp;&amp; (</code> from my <code>&lt;PersonEditForm&gt;</code> component, it works as expected.  Can anyone explain the subtle difference I'm running into here?  I have down-stream complex form components that weren't handling a null state, so I wanted to only create the modal if a person was being edited.</p>