How can I close Modal and Popconfirm of AntD when I click the OK button on Popconfirm

Question

Recently I try to use antd. However, when I close Modal and Popconfirm components once I click the OK button on Popconfrm, it doesn't work well. It means only Modal close, not Popconfirm. Here is my code.

import { Popconfirm, Button, Modal } from "antd";
import { useState } from "react";

const PopTest = () => {
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [popVisible, setPopVisible] = useState(false);

  const showPopconfirm = () => {
    setPopVisible(true);
  };

  const popOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setPopVisible(false);
      setIsEditModalVisible(false);
      setConfirmLoading(false);
    }, 2000);
  };
  const popCancel = () => {
    setPopVisible(false);
  };

  const handleCancel = () => {
    console.log("Clicked cancel button");
    setIsEditModalVisible(false);
  };

  const handleOk = () => {
    setIsEditModalVisible(false);
  };

  const shoModal = () => {
    setIsEditModalVisible(true);
  };
  return (
    <>
      <Modal title="Eidt User" visible={isEditModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Popconfirm
          title="Title"
          visible={popVisible}
          onConfirm={popOk}
          okButtonProps={{ loading: confirmLoading }}
          onCancel={popCancel}
        >
          <Button type="primary" onClick={showPopconfirm}>
            Open Popconfirm with async logic
          </Button>
        </Popconfirm>
      </Modal>
      <Button onClick={shoModal}>open</Button>
    </>
  );
};

export default PopTest;

You might check the function which is PopOk, I code them setPopVisible(false);, setIsEditModalVisible(false); Please help me to figure out it. Thanks.