React: override internal components with custom component

I have a modal that is completely self contained. The modal is opened via going to the modal route and all the functionality to close the modal from button or outside clicks is within the modal component. Basically the modal is not controlled by any parent passing state. I was given a task of making the modals button customizable, meaning passing in a new button component, so we can add the modal to our lib instead of copy pasting the code in projects. Lol this seemed simple enough, and maybe it is and I am just overthinking this.

I cant paste the actual code but I can use a contrived example. This is a very simplified version of the modal, keeping in mind it opens via route so there's really no state and setState in the actual code. Also here is a fiddle

const ModalHeader = ({ onClose }) => {
  return (
    <div className="modal__header">
      <button
        className="modal__close-btn"
        data-testid="modal-close-button"
        onClick={onClose}
      />
    </div>
  );
};

const Modal = ({ children }) => {
  const [state, setState] = React.useState(true);

  const handleCloseOutsideClick = () => {
    setState(false);
  };

  const handleCloseButtonClick = () => {
    setState(false);
  };

  const renderModal = () => {
    return (
      <div className="modal-overlay" onClick={handleCloseOutsideClick}>
        <div className="modal">
          <ModalHeader onClose={handleCloseButtonClick} />
          {children}
        </div>
      </div>
    );
  };

  return state ? renderModal() : null;
};

const App = () => {
  return (
    <Modal>
      <div>Modal Children</div>
    </Modal>
  );
};

ReactDOM.render(<App />, document.querySelector('#app'));

I tried a few things, initially I attempted to find a way to pass in a new header component containing a button. Then as I got into the code I realized what I was doing would lose the self contained functionality of the modal. My approach was along the lines of below but obviously the onClick would be an issue since invoking the close functionality is internal.

So I tried using cloneElement to add props within the component if the custom header was detected:

// inside modal component
React.useEffect(() => {
  React.Children.map(children, (child: React.ReactElement) => {
    if (child && child.type === ModalHeader) {
      setHederFound(true);
    }
  });
}, []);

// inside modal render:
<div className={modalClasses} onClick={stopPropagation}>
  {!headerFound ? (
    <ModalDefaultHeader onClose={handleCloseButtonClick} />
  ) : (
    React.Children.map(children, (child: React.ReactElement) => {
      if (child && child.type === ModalHeader) {
        return React.cloneElement(child, {
          onClose: handleCloseButtonClick,
        });
      }
    })
  )}
  {children}
</div>;

Obviously that did not work because there's no onClick in the custom button. Anyways I am thinking that I am over complicating this. I just need a way to pass in a custom button while leaving the functionality internal to the modal. Any assistance would be appreciated.

Thanks in advance.