Реагируйте на форму antd 4 в модальных resetFields, показывая неверные данные

Question

Мне трудно понять, почему я вижу это неожиданное поведение. Если у меня есть некоторые данные, которые я передаю в подпорку на объекте, который имеет модальную форму с формой, как показано ниже, и я нажимаю кнопку, затем отменяю, затем нажимаю другую кнопку, форма показывает ранее нажатые излагать каждый раз. В коде useEffect я вижу, что загружен правильный человек, хотя форма инициализирует предыдущего человека.

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 }) => {
  const [form] = Form.useForm();
  const prevRef = useRef();

  useEffect(() => {
    if (prevRef.current === null && person) {
      form.resetFields();
    }
    prevRef.current = person;
  });

  return (
    person && (
      <Modal
        visible={!!person}
        title="Person Editor"
        okText="Create"
        cancelText="Cancel"
        onCancel={onCancel}
        onOk={() => {
          form
            .validateFields()
            .then(values => {
              onCreate(values);
            })
            .catch(info => {
              console.log("Validate Failed:", info);
            });
        }}
      >
        <Form
          form={form}
          layout="vertical"
          name="form_in_modal"
          initialValues={person}
        >
          <Form.Item
            name="name"
            label="Name"
            rules={[
              {
                required: true,
                message: "Please input the person's name!"
              }
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    )
  );
};

const CollectionsPage = () => {
  const [person, setPerson] = useState(null);

  const onCreate = values => {
    console.log("Received values of form: ", values);
    setPerson(null);
  };

  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setPerson({ name: "Bob" });
        }}
      >
        Edit Bob
      </Button>
      <Button
        type="primary"
        onClick={() => {
          setPerson({ name: "John" });
        }}
      >
        Edit John
      </Button>
      <Button
        type="primary"
        onClick={() => {
          setPerson({ name: "Phil" });
        }}
      >
        Edit Phil
      </Button>
      <PersonEditForm
        person={person}
        onCreate={onCreate}
        onCancel={() => {
          setPerson(null);
        }}
      />
    </div>
  );
};

ReactDOM.render(<CollectionsPage />, document.getElementById("container"));

Однако, если я удаляю person && ( из моего <PersonEditForm> компонента, он работает как и ожидалось. Кто-нибудь может объяснить тонкую разницу, с которой я здесь сталкиваюсь? У меня есть сложные компоненты формы нисходящего потока, которые не обрабатывали нулевое состояние, поэтому я хотел создать модал, только если человек редактировался.