ModalCompoundUse.js

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="App">
      <h1>Try opening the modal</h1>
      <button onClick={() => setIsModalOpen(true)}>Open the modal</button>

      {isModalOpen ? (
        <Modal>
          <Modal.Header>This is a modal</Modal.Header>
          <Modal.Body>
            <p>Inside it is some information</p>
            <p>You can render whatever JSX you want in here</p>
          </Modal.Body>
          <Modal.Actions>
            <button onClick={() => setIsModalOpen(false)}>Cancel</button>
            <button onClick={() => alert("You have accepted!")}>Accept</button>
          </Modal.Actions>
        </Modal>
      ) : null}
    </div>
  );
};