So I have been thinking about this for a while, and I would like to have this settled once and for all. If possible, it would be great to explain why you think whichever way works. Does it make sense for a Modal to manage its own state or this should be managed by its Parent? In the code below, the first Modal is dumb and its fully managed by its Parent. In the second Modal, it can be managed by both its Parent and itself.

import Button from "../components/button";

const Modal = (props: { onClose: () => void }) => {
  const { onClose } = props;

  return (
    <>
      <div className="wrapper">
        <p>Hello modal</p>
        <button onClick={() => onClose()}>Close</button>
      </div>
    </>
  );
};

const ModalWithState = (props: { active?: boolean; onClose: () => void }) => {
  const { active, onClose } = props;
  const [activeS, setActiveS] = useState(false);

  useEffect(() => {
    if (!active && !hasParentControl()) {
      setActiveS(true);
      return;
    }
    setActiveS(active);
  }, [active]);

  const hasParentControl = () => typeof active !== null;

  const onCloseModal = () => {
    setActiveS(false);
    onClose();
  };

  return (
    <>
      {activeS && (
        <div className="wrapper">
          <p>Hello modal</p>
          <button onClick={() => onCloseModal()}>Close</button>
          <button onClick={() => setActiveS(true)}>Open</button>
        </div>
      )}
    </>
  );
};

const ParentComponent = () => {
  const [activeModal, setActiveModal] = useState(false);

  const openModal = () => setActiveModal(true);

  return (
    <>
      {activeModal && <Modal onClose={() => setActiveModal(false)} />}
      <ModalWithState active onClose={() => setActiveModal(false)} />
      <Button onClick={() => openModal()}>Open modal</Button>
    </>
  );
};