How to save ReactJS modal fade animation?

Question

React

How can I keep the modal's fading animation if the check is very necessary, but everything works fine without it?

export const ModalBlock: React.FC<ModalBlockProps> = ({
  title,
  onClose,
  isOpen = false,
  children,
}: ModalBlockProps): React.ReactElement | null => {
  if (!isOpen) {
    return null
  }
  return (
    <Dialog TransitionComponent={Transition} open={isOpen} aria-labelledby='form-dialog-title'>
      <DialogTitle id='form-dialog-title'>
        <IconButton onClick={onClose} color='secondary' aria-label='close'>
          <CloseIcon style={{ fontSize: 26 }} color='secondary' />
        </IconButton>
        {title}
      </DialogTitle>
      <DialogContent>{children}</DialogContent>
    </Dialog>
  )
}

Answer 1

export const ModalBlock: React.FC<ModalBlockProps> = ({
  title,
  onClose,
  isOpen = false,
  children,
}: ModalBlockProps): React.ReactElement | null => {
  const [closing, setClosing] = useState(false);
  const handleClose = () => setClosing(true);
  
  useEffect(() => {
    if (isOpen) {
      setClosing(false);
    }
  }, [isOpen]);

  if (!isOpen) {
    return null;
  }

  return (
    <Dialog TransitionComponent={Transition} open={!closing && isOpen} onExited={onClose} aria-labelledby='form-dialog-title'>
      <DialogTitle id='form-dialog-title'>
        <IconButton onClick={handleClose} color='secondary' aria-label='close'>
          <CloseIcon style={{ fontSize: 26 }} color='secondary' />
        </IconButton>
        {title}
      </DialogTitle>
      <DialogContent>{children}</DialogContent>
    </Dialog>
  );
};