DialogContainer.js

const DialogContainer = ({ visible, onClickOutside, children }) => {
  // ...
  return (
    <Transition
      in={visible}
      timeout={{
        enter: 0,
        exit: 400,
      }}
      appear
      mountOnEnter
      unmountOnExit
    >
       {React.Children.map(children, child =>
          React.cloneElement(child, { freeze: !visible }),
       )}
    </Transition>
  );  
});

const Dialog = React.memo(
  ({ children, ...props }) => {
    return (
      <div
        {...props}
      >
        {children}
      </div>
    );
  },
  (prev, next) => next.freeze,
);

const MyComponent = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Open</Button>

      <DialogContainer visible={visible}>
        <Dialog>
           ...
        </Dialog>
      </DialogContainer>
    </>
  );
};