AnotherUniverse

Подъем состояния:

const Foo = () => {
  const [shouldShowBar, setShouldShowBar] = useState(true);

  const handleBarClose = useCallback(() => {
    setShouldShowBar(false);
  }, []);

  return (
    <>
      {shouldShowBar && <Bar onClose={handleBarClose} />}
    </>
  );
};

Если это простое модальное окно, которое надо показывать по клику и подобные окна планируется использовать во многих местах, то для удобства их использования можно реализовать обертку, в которой будет использоваться прием render-props:

const Foo = ({ onConfirm }) => {
  return (
    <ModalWrapper
      onConfirm={onConfirm}
      body="Hello"
    >
      {showModal => (
        <Button onClick={showModal}>Show modal</Button>
      )}
    </ModalWrapper>
  );
}

Это позволит не плодить во всех компонентах, где одни будут использоваться, логику их состояния.