title: React and Antd, form data destroys on fulllscreen drawer out of focus
body: <p>I have tried to remove the destroy on close, use same form hook, different form hook, removed from hook, but nothing worked.
  I have consoled logged the form data on show modal and close modal. Show modal has the form data but inside the log of close modal the data is reset to <code>undefined</code>. As soon as the modal opens the Data resets to <code>null</code>.</p>
  <p>In the following code you can see the creation of Full screen modal which is made using AntDrawer:</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>import React, { useEffect, useState } from "react";
  import FullscreenDialog from "Components/FullScreenDialog";
  import Form from "Components/Form";
  import { Input, Typography, Button, Space, Menu, Dropdown } from "antd";
  import { PlusCircleOutlined, CloseOutlined, DownOutlined } from "@ant-design/icons";
  import HeaderInput from "Components/Inputs/HeaderInput";
  import Table from "Components/Table";
  import styled from "styled-components";
  import { Services } from "Utilities/network";
  import DetailsModal from "./DetailsModal";
  
  const RootWrapper = styled.div`
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type="number"] {
      -moz-appearance: textfield;
    }
  `;
  
  const CreateVoucher = ({ visible, initalValue = {}, onSuccess = (e) =&gt; e, onClose = (e) =&gt; e }) =&gt; {
    const [form] = Form.useForm();
    const [voucherData, setVoucherData] = useState([]);
    const [newModal, setNewModal] = useState(false);
    const [formData, setFormData] = useState({});
  
    const handleSubmit = async () =&gt; {
      const { _id, name, header } = form.getFieldsValue(true);
      if (name &amp;&amp; header &amp;&amp; voucherData) {
        let resp = await Services.createVoucher({
          _id,
          name,
          header,
          voucherData,
        });
        if (resp.key) onSuccess();
      }
    };
    if (initalValue) {
      const { _id, name, header, voucherData } = initalValue;
      form.setFieldsValue({
        _id,
        name,
        header,
        voucherData,
      });
    }
    useEffect(() =&gt; {
      const { voucherData } = initalValue;
      if (voucherData &amp;&amp; voucherData.length) setVoucherData(voucherData);
      else setVoucherData([]);
    }, [initalValue]);
  
    const handleDelete = (index) =&gt; {
      const tableData = voucherData.filter((data, dataIndex) =&gt; {
        if (index !== dataIndex) return data;
        return null;
      });
      setVoucherData(tableData);
    };
  
    return (
      &lt;&gt;
        &lt;FullscreenDialog visible={visible} onClose={onClose}&gt;
          &lt;FullscreenDialog.Paper&gt;
            &lt;RootWrapper&gt;
              &lt;Typography.Text strong style={{ fontSize: "30px" }}&gt;
                Generate Voucher
              &lt;/Typography.Text&gt;
              &lt;Form form={form}&gt;
                &lt;Space direction="vertical" style={{ width: "100%" }}&gt;
                  &lt;Form.Item label="Voucher ID" name="name" rules={[{ required: true, message: "Please input ID" }]}&gt;
                    &lt;Input /&gt;
                  &lt;/Form.Item&gt;
                  &lt;HeaderInput
                    fieldProps={{
                      name: "header",
                      label: "Inoivce Header",
                      rules: [{ required: true, message: "Please select header" }],
                    }}
                    itemProps={{ placeholder: "Select Header for Voucher" }}
                  /&gt;
                  &lt;Space style={{ float: "right", marginTop: "20px" }}&gt;
                    &lt;Button
                      type="primary"
                      shape="round"
                      icon={&lt;PlusCircleOutlined /&gt;}
                      onClick={() =&gt; {
                        setFormData(form.getFieldsValue(true));
                        setNewModal(true);
                      }}
                    &gt;
                      Add Details
                    &lt;/Button&gt;
                  &lt;/Space&gt;
  
                  &lt;Table
                    dataSource={voucherData}
                    count={voucherData?.length || 0}
                    columns={[
                      {
                        title: "Label",
                        key: "label",
                        dataIndex: "label",
                        render: (_, record) =&gt; record.label,
                      },
                      {
                        title: "Details",
                        key: "detail",
                        dataIndex: "detail",
                        render: (_, record) =&gt; record.detail,
                      },
                      {
                        align: "right",
                        render: (_, record, index) =&gt; {
                          return (
                            &lt;Dropdown
                              trigger={["click"]}
                              overlay={
                                &lt;Menu&gt;
                                  &lt;Menu.Item
                                    style={{ color: "red " }}
                                    onClick={() =&gt; {
                                      handleDelete(index);
                                    }}
                                  &gt;
                                    &lt;CloseOutlined /&gt; Delete
                                  &lt;/Menu.Item&gt;
                                &lt;/Menu&gt;
                              }
                            &gt;
                              &lt;Button type="primary"&gt;
                                Edit
                                &lt;DownOutlined /&gt;
                              &lt;/Button&gt;
                            &lt;/Dropdown&gt;
                          );
                        },
                      },
                    ]}
                  /&gt;
  
                  &lt;Space style={{ float: "right", marginTop: "30px" }}&gt;
                    &lt;Button type="outline" onClick={onClose}&gt;
                      Cancel
                    &lt;/Button&gt;
                    &lt;Button type="primary" htmlType="submit" onClick={handleSubmit}&gt;
                      Submit
                    &lt;/Button&gt;
                  &lt;/Space&gt;
                &lt;/Space&gt;
              &lt;/Form&gt;
            &lt;/RootWrapper&gt;
          &lt;/FullscreenDialog.Paper&gt;
        &lt;/FullscreenDialog&gt;
        &lt;DetailsModal
          visible={newModal}
          onClose={() =&gt; {
            setNewModal(false);
            console.log(formData);
            form.setFieldsValue({ name: "2222" });
            console.log(form.getFieldsValue(true));
          }}
          onSuccess={(data) =&gt; {
            setVoucherData([...voucherData, data]);
            setNewModal(false);
            form.setFieldsValue(formData);
          }}
        /&gt;
      &lt;/&gt;
    );
  };
  
  export default CreateVoucher;</code></pre>
  </div>
  </div>
  </p>
  <p>Below is the code for modal to use another form:</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>import React from "react";
  import { Modal, Space, Input, Button } from "antd";
  import Form from "Components/Form";
  import styled from "styled-components";
  
  const RootWrapper = styled.div`
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type="number"] {
      -moz-appearance: textfield;
    }
  `;
  
  const DetailsModal = ({ visible, onClose = (e) =&gt; e, onSuccess = (e) =&gt; e }) =&gt; {
    const [form] = Form.useForm();
  
    return (
      &lt;Modal
        visible={visible}
        destroyOnClose={true}
        onClose={() =&gt; {
          form.resetFields();
          onClose();
        }}
        onCancel={() =&gt; {
          form.resetFields();
          onClose(false);
        }}
        title="Add Details"
        footer={false}
      &gt;
        &lt;Form form={form}&gt;
          &lt;Space direction="vertical" style={{ width: "100%" }}&gt;
            &lt;RootWrapper&gt;
              &lt;Form.Item name="label" label="Label" rules={[{ required: true, message: "Please input label" }]}&gt;
                &lt;Input /&gt;
              &lt;/Form.Item&gt;
              &lt;Form.Item name="detail" label="Details" rules={[{ required: true, message: "Please input details" }]}&gt;
                &lt;Input /&gt;
              &lt;/Form.Item&gt;
            &lt;/RootWrapper&gt;
            &lt;Space style={{ float: "right", marginTop: "20px" }}&gt;
              &lt;Button
                type="outline"
                onClick={() =&gt; {
                  form.resetFields();
                  onClose();
                }}
              &gt;
                Cancel
              &lt;/Button&gt;
              &lt;Button
                type="primary"
                htmlType="submit"
                onClick={() =&gt; {
                  const { detail, label } = form.getFieldsValue(true);
                  onSuccess({ detail, label });
                }}
              &gt;
                Submit
              &lt;/Button&gt;
            &lt;/Space&gt;
          &lt;/Space&gt;
        &lt;/Form&gt;
      &lt;/Modal&gt;
    );
  };
  
  export default DetailsModal;</code></pre>
  </div>
  </div>
  </p>