React child component not executing functional parent component function

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