Trying to call function onClick inside Chakra UI Modal won't work

I have a function to do some calculations called 'handleEstimate' I want the function to run on button click inside a ChakraUI modal. But when I click the button inside the modal the function will not run. I tried the same thing inside outside the modal component and it works. I also tried defining the function inside the modal component, that didn't work.

handleEstimate function

 async function handleEstimate() {
    register({ name: "estimatedPayment", type: "custom" });
    setValue("estimatedPayment", calcData
    .filter( (term) => term.newOrUsed === state.data.carStatus && term.year === state.data.modelYear )
    .map((filteredTerm) => (Math.round(
    
    ((state.data.price - state.data.price * (filteredTerm.deposit / 100)) *
      
      (filteredTerm.rate / 100 / 12) *
      
      Math.pow( 1 + filteredTerm.rate / 100 / 12, filteredTerm.term  )) /
      
      (Math.pow( 1 + filteredTerm.rate / 100 / 12,  filteredTerm.term) - 1)
    ))));
    register({ name: "calcTerm", type: "custom" });
    setValue("calcTerm", calcData
    .filter(
      (term) =>
        term.newOrUsed === state.data.carStatus &&
        term.year === state.data.modelYear
    )
    .map((filteredTerm) => filteredTerm.term *12 - 0));
    register({ name: "calcRate", type: "custom" });
    setValue("calcRate", calcData
    .filter(
      (term) =>
        term.newOrUsed === state.data.carStatus &&
        term.year === state.data.modelYear
    )
    .map((filteredTerm) => filteredTerm.rate - 0));
    register({ name: "calcDeposit", type: "custom" });
    setValue("calcDeposit", calcData
    .filter(
      (term) =>
        term.newOrUsed === state.data.carStatus &&
        term.year === state.data.modelYear
    )
    .map((filteredTerm) => filteredTerm.deposit - 0));
  }

ChakraUI Modal Component

  function BasicUsage() {


        return (
      <>
        <Button colorScheme='e65323' className="centered-button" onClick={onOpen}>Save & 
              Continue</Button>
        <Modal isOpen={isOpen} onClose={onClose}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>Request For Personal Details</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
            Note: 
            
            We will now ask you for some personal details in order to better match you with the right Banks.
            
            Your information is safe. If you do not complete your request for us to send your information to Banks within 7 days, we will permanently delete your information.

            </ModalBody>
  
            <ModalFooter>
              
              <Button  onClick={handleEstimate} colorScheme='blue' mr={3}>
               Continue
              </Button>

              <Button onClick={onClose} variant='ghost'>Save & Exit</Button>

            </ModalFooter>
          </ModalContent>
        </Modal>
      </>
    )
  }

I then use the modal component on the page:

 <BasicUsage></BasicUsage>
          
     <button  onClick={handleEstimate} className="centered-button">
             
            </button>

The HTML button element successfully calls the function but when I open the modal and click the:

<Button onClick={handleEstimate} colorScheme='blue' mr={3}>
               Continue
              </Button>

The function is not called