I am a newbie in JS and React, any help would greatly be appreciated.

I am trying to change my modal action based on the form is edited or not. what I am trying to achieve is, when I edit my form, closeOnOverlayClick will become true, which means the modal will not be closed if I click outside the modal.

This is my modal component:

export default function Modal(props) {
const { isOpen, onOpen, onClose }   = useDisclosure()

    return (
        <>
            <Button fontSize="13px" color="black" bg="rgba(255,255,255,0.7)" pt="4px" pb="5px" mb="2" h="fit-content" _hover={{ bg:'white' }} disabled={props.disabled} onClick={onOpen}>{props.button}</Button>
            <Modal closeOnOverlayClick={true} isOpen={isOpen} onClose={onClose} size={props?.size?props?.size:"xl"}>
                <ModalOverlay />
                <ModalContent background={bgColor} color={color} maxHeight="calc(100vh - 5rem)" overflowY="auto" mb="1.25rem">
                    <ModalHeader fontSize="16px" fontWeight="600" pb="2" pt="6" pl="8">{props.heading}</ModalHeader>
                    <ModalCloseButton id="button-close" />
                    <ModalBody fontSize="13px" lineHeight="140%" px="8">
                    {props.type==="general" ? props.children:props.children && React.cloneElement(props.children, {onClick: onClose})}
                    </ModalBody>
                </ModalContent>
            </Modal>
        </>
    )

}

This is my child component where I have used react useForm:

    export default function EditContact(props) {
  const { register, handleSubmit,control,formState,reset}     = useForm()
  const { mutateAsync, isLoading,isError,data}                = useEmergencyContact()
  const required                                              = <span className="required">*</span>
  const onSubmit    = async (inputData) => {
    inputData.ContactUrn        =  props.contact?.objecturn
    inputData.AddressObjectUrn  =  Number(props.contact?.addressObjecturn)
    let contact                 = await mutateAsync(inputData)
    contact && contact["errorValue"] === "0" && reset({}, { keepValues: true })
  }
  return(
    <form onSubmit={handleSubmit(onSubmit,props)}>      
      <Text mb="2" fontStyle="italic" id="edit-required-text">{required}Required fields</Text>
      <DescriptionList key="relationships" className="details"
        items={[
          {formControl:true,name: <>Name {required}</>,id:"name",description:<Input size='xs'fontSize="13px" borderColor="#fff" defaultValue={ToTitleCase(props.contact?.name)} {...register("Name")}/>},
          {formControl:true,name: <>Phone number (primary) {required}</>,id:"phone-number-primary",description:<Input size='xs' fontSize="13px" borderColor="#fff" defaultValue={ToTitleCase(props.contact?.contactNumber1)} {...register("PrimaryTelephoneNumber")}/>},
          {formControl:true,name:"Email", description:<Input size='xs' fontSize="13px" borderColor="#fff" defaultValue={props.contact?.emailAddress?.toLowerCase()}{...register("EmailAddress")}/>}
        ]}
      />
      <Box textAlign="center" my="4">
{!formState.isDirty? (<Button category="secondary" type="button" name={"Close"} onClick={props.onClick} />) :
          (<Modal button="Close" heading="Quit editing?" size="sm" secondary={true}          >
            <ModalExit onExit={()=>props.onClick()}/>
          </Modal>)
        } 

     <Button id="save" ml="2" type="submit" isDisabled={!formState.isDirty} isLoading={formState.isSubmitting || isLoading } name="Save" />
      </Box>
    </form>
  )
}

And this is my parent component where I have called the form within the modal:

function GetContacts(isLoading, error, data){
  
  const contactsLength                            = data?.contacts?.contact?.length

  if (isLoading) return (<Text mb="4">Loading...</Text>)
  if (error) return <Error/>
  return data === undefined|| data === null ||data?.contacts?.contact === undefined || data?.contacts?.contact === null ||data?.contacts?.contact?.length === 0 ?
  <>
    <H3 title="No emergency contacts" />
  </>:
  <Box className="contact">
    
    {data?.contacts?.contact.map((contact, index) => (
      <Box key={index} borderBottom={lineColor} m="0 -12px 16px" p="0 12px 12px">
        <Flex gap={3} justifyContent="center" alignItems="center">
            <Modal button="Edit" heading="Edit this emergency contact">
              <EditContact contact={contact} relationshipData={data?.contacts?.relationshipOptions?.selectOption} />
            </Modal>
            
        </Flex>
      </Box>
    ))}
  </Box>
}