React child component not executing functional parent component function - reactjs

Question

I have this Footer child, which has the Modal parent's cancel function passed to it in the props, but it won't execute the parent's "handleCancel" function.
const PageFooter = (props) => {
const { handleCancel} = props;
const modalStyleClass = useModalStyles();
return(
<footer className={modalStyleClass.modalFooter}>
<div className="container-fluid">
<div className="row">
<div className="col-sm-6">
</div>
<div className="col-sm-6 text-right">
<button className={modalStyleClass.cancelButton}
onClick={handleCancel}>
</button>
</div>
</div>
</div>
</footer>
)}
export default PageFooter;
The generic edit modal parent get's it's props from whatever other parent component called it: That parent implements the state of the modal
with
const [isModalShown, toggleModal] = React.useState(false);
The generic 'EditModal' as parent to the child footer component's code:
export function GenericEditModal (props) {
const {isModalShown, title, closeModal, } = props;
const HandleCancel = () => {
closeModal();
};
return (
<form >
<div>
<Modal
className={modalStyleClass.modal}
open={isModalShown}
closeModal={handleCloseModal}
onClose={handleCloseModal}
>
<div className={modalStyleClass.paper} style={{ top: '0px',padding:'0px', }} >
<ModalHeader>
handleCancel={HandleCancel}
</ModalHeader>
{ markup }
</div>
<Footer>
handleCancel={HandleCancel}
</Footer>
</div>
</Modal>
</div>
</form>
);
};
export const GenericEditModal = React.memo(GenericEditModal);

Answer 1

Pass to child like this:
<Footer handleCancel={HandleCancel}/>