How to wait the data from modal to continue the function?

I am using modal to answer if the user want to delete some data. I need his answer to continue the function and delete or not depending on what was chosen. Here is my code: I am using an imagem to call the function:

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

This is the function called:

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.log(modal.confirm);
}

This is my modal:

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>
  );

At first click on remove image, the console.log(modal.confirm) works first than the modal is closed and so it prints empty. If I close the modal by clicking in the confirm button and try again to click on remove image, it shows true. How can I make the rest of the function depending on what the modal returns?

Resolution:

Modal:

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

Main:

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}
      />
)

You can do that by placing the actual data deletion ('the rest of the function') in an other function, that you pass in the modal's props.

In the modal, you call that function inside backPage. This way, the deletion will be called only if the user confirms.

This way, modal.confirm is unnecessary.