Как дождаться данных из модала, чтобы продолжить функцию?

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

<img src = {deletes} width = "25" height = "25" alt = "Edit" onClick = {(e)=>deleteHandler()} className = "imagemEnter"/>

Это функция называется:

const [modal, setModal] = useState({
    isOpen: false,
    type: "",
    frase: "",
    confirm: ""
  });

function deleteHandler(){
    setModal({ isOpen: true, type: "sure?", frase:"Are you sure that you want to remove this data?", confirm:false });
console.info(modal.confirm);
}

Это мой модальный:

function ModalConfirm(props) {
  const { modal, setModal } = props;

  function closeModal() {
    setModal({ ...modal, isOpen: false });
  }

  function backPage(){
    setModal({ ...modal, isOpen: false, confirm true});
  }

return (
    <div> 
      if (props.modal.tipo === "sure?") {
          return (
            <div>
              <Modal
                ariaHideApp = {false}
                isOpen = {modal.isOpen}
                onRequestClose = {closeModal}
                style = {{
                  overlay: {
                    position: "fixed",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    opacity: 1,
                  },
                  content: {
                    textAlign: "center",
                    position: "absolute",
                    width: "500px",
                    height: "360px",
                    top: "130px",
                    left: "550px",
                    right: "500px",
                    bottom: "200px",
                    border: "1px solid #ccc",
                    overflow: "auto",
                    WebkitOverflowScrolling: "touch",
                    borderRadius: "10px",
                    outline: "none",
                    padding: "20px",
                  },
                }}
              >
                  <img src = {question} width = "150" height = "150" alt = "Question" />
                  <p></p>
                  <p className = "title">{props.modal.frase}</p>
                  <div>
                    <button
                      onClick = {closeModal}
                      titulo = "Cancel"
                    ></button>
                    <button
                      onClick = {backPage}
                      titulo = "Confirm"
                    ></button>
                  </div>
              </Modal>
            </div>
          );
        }
      })()}
    </div>
  );

При первом нажатии на удаление изображения сначала работает console.info(modal.confirm), затем закрывается модальное окно, и поэтому оно печатается пустым. Если я закрою модальное окно, нажав кнопку подтверждения, и снова попытаюсь щелкнуть «Удалить изображение», оно покажет «истина». Как я могу сделать остальную часть функции в зависимости от того, что возвращает модальное окно?

Разрешение:

Модальный:

const { confirmDelete, modal, setModal } = props;
function backPage(){
    confirmDelete(true);
    setModal({ ...modal, isOpen: false});
  }

Основной:

const [confirmDelete, setConfirmDelete] = useState(false);
const [modal, setModal] = useState({
    isOpen: false,
    type: "",
    frase: ""
  });
function delete(valor) {
    if (valor) {
//delete fetch
}
function deleteHandler() {
    setModal({
      isOpen: true,
      tipo: "sure?",
      frase: "Are you sure that you want to remove this data?",
    });
  }
return(
....
<Modal
        confirmDelete = {confirmDelete}
        modal = {modal}
        setModal = {setModal}
      />
)