Office Fluent UI / Fabric UI Modal - how can I close it from the body component?

I'm using the Modal component from the fluent-ui-react

https://developer.microsoft.com/en-us/fluentui#/controls/web/modal

like this:

function ModalExtended(props) {
  const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(
    false
  );
  const isDraggable = useBoolean(false);
  const titleId = useId("title");

  return (
    <div>
      <DefaultButton onClick={showModal} text={props.buttonText} />
      <Modal
        titleAriaId={titleId}
        isOpen={isModalOpen}
        onDismiss={hideModal}
        isBlocking={false}
        containerClassName={contentStyles.container}
      >
        <div className={contentStyles.header}>
          <span id={titleId}>{props.gridHeader}</span>
          <IconButton
            styles={iconButtonStyles}
            iconProps={cancelIcon}
            ariaLabel="Close popup modal"
            onClick={hideModal}
          />
        </div>
        <div className={contentStyles.body}>{props.body}</div>
      </Modal>
    </div>
  );
}

Then i call the ModalExtended component from other components like this:

<ModalExtended
            buttonText="Open modal button text"
            gridHeader="Modal header text"
            body={
              <GenericTreeGridContainer/>
            }
          />

In the body prop i send another component (GenericTreeGridContainer) that i would like to render when the Modal opens. In this body component i have a click event which, when it finishes its work should also close the Modal.

Is there a way to pass the hideModal function from the ModalExtended components to my body component so i can close the Modal from the body component?

Define a parent component with isModalOpen and hideModal, and pass them into both the modal and body as props. You also might be able to render the {props.body} instead like <props.body hideModal={...} /> but I haven't tried that to see how good of a pattern it is.