calling close modal function inside another function typescript

Question

1. My question is why after filling the form and pressing the "confirm" button, the chequeModal is not closed? By calling "handleChequeModalClose()" inside "handleSubmit()" function I expected it to close the Modal. The "close" button is working fine and closes the chequeModal.

import {submitTender} from '../utils';
const ChequeModal = ({
        chequeModalOpen,
        handleChequeModalClose,
        chequeDetails,
        localAmount
    }: ChequeModalProps) => {
        const handleSubmit = (e) => {
            e.preventDefault();
            submitTender({
                ...chequeDetails,

            });
            handleChequeModalClose();
        };
        return ( 
            <Panel overlay title = "Cheque details"
            variant = {
                PanelHeaderVariant.TitleAndCloseButton
            }
            size = {
                PanelSize.Large
            }
            onClose = {
                handleChequeModalClose()
            }
            open = {
                chequeModalOpen
            } >
            <LabelWrapper> Cheque number < /LabelWrapper>  
            <InputWrapper name = "chequeNumber"
            onInput = {
                (e: any) => {
                    setChequeNumberInput(filterDigits(e.target.value));
                }
            }
            value = {
                chequeNumberInput
            }
            onBlur = {
                () => checkError(errorType.chequeNumber)
            }
            errorMessage = {
                chequeNumberError
            }
            /> 
            <Button label = "Confirm"
            id = "confirm-btn"
            data - autofocus onClick = {
                handleSubmit
            }
            /> 
            <Button label = "Cancel"
            variant = {
                ButtonVariant.SecondaryFilled
            }
            onClick = {
                handleChequeModalClose()
            }
            />  
            </Panel>

        }


        ///////CheckoutPage.tsx//////
        const CheckoutPage = ({
                    //...some code here}:CheckoutPageProps) =>{
                    const [chequeModalOpen, setChequeModalOpen] = useState(false);
                    const handleChequeModalClose = () => {
                        setChequeModalOpen(false);
                    };
                    return ( 
                      <ChequeModal chequeModalOpen = {
                            chequeModalOpen
                        }
                        
                        handleChequeModalClose = {
                            () => handleChequeModalClose
                        }
                        localAmount = {
                            keyInAmount
                        }
                        chequeDetails = {
                            chequeDetails
                        } >
                        </ChequeModal>
                    )
                }

1. I will appreciate it if you guys could help me out.