How to re render Modal in react Functional component

Question

Im using Ant design pro UI library for develop my frontend. The scenario is when i click the edit button i want to set defaultValues to my Modal Input fields. But when i click edit first time it is work fine and defaultValues are come with correct form. After that i close my Modal and again click the Edit button then same results are appear in the Modal. The problem is Modal only hide and it is not re rendering. If anyone know to how re render Modal in react please help me...

{visi && (
        <Modal
          title="Edit Plan"
          visible={visi}
          onCancel={() => {
            hideModal();

            if (!showDetail) {
              setCurrentRow(undefined);
            }
          }}
          okButtonProps={{ style: { display: 'none' } }}
          cancelButtonProps={{ style: { display: 'none' } }}
          bodyStyle={{ width: 400 }}
          values={currentRow || {}}
        >
          <Form form={form} layout="vertical" name="addNewPlan" onFinish={handleUpdate}>
            <FormItem name="id" hidden initialValue={singlePackage ? singlePackage.id : null}>
              <Input placeholder="Basic Plan" style={{ width: '33vw', marginTop: -10 }} />
            </FormItem>
            <FormItem
              name="name"
              label="Plan Name"
              rules={[
                {
                  required: true,
                  message: 'Please input plan name!',
                },
              ]}
              initialValue={singlePackage ? singlePackage.name : null}
            >
              <Input placeholder="Basic Plan" style={{ width: '33vw', marginTop: -10 }} />
            </FormItem>
            <FormItem
              name="description"
              label="Description"
              rules={[
                {
                  required: true,
                  message: 'Please input description!',
                },
              ]}
              initialValue={singlePackage ? singlePackage.description : null}
            >
              <TextArea
                allowClear={true}
                style={{ marginTop: -10, width: '33vw' }}
                placeholder="The Basic Plan having this kind of features and you can Send 300 email in a day."
              />
            </FormItem>
            <FormItem
              name="campaign_count"
              label="Campaign Count"
              rules={[
                {
                  required: true,
                  message: 'Please input campaign count!',
                },
              ]}
              initialValue={singlePackage ? singlePackage.campaign_count : null}
            >
              <Input style={{ width: '33vw', marginTop: -10 }} type="number" />
            </FormItem>
            <FormItem>
              <div style={{ width: '33vw' }}>
                <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
                  <span>Update</span>
                </Button>
                <Button type="default" onClick={hideModal} style={{ float: 'right' }}>
                  <span>Cancel</span>
                </Button>
              </div>
            </FormItem>
          </Form>
        </Modal>
)}

Answer 1

You need to use resetFields method of form instance.

const [form] = useForm();

return (
  <Modal onCancel={() => {
    hideModal();
    form.resetFields();
  }}>
    <Form form={form}>...</Form>
  </Modal>
)