How To Give an MUI Modal Component an Exit Animation that's Different from the Opening Animation?

Question

Trying to give an MUI modal another animation on close.

I have tried 2 ways of trying to achieve a closing animation for my modal.

Both of them do the correct opening animation, but I can't seem to get the latter closing animation to happen (onClose)...

My initial attempt:

Container:

import React, { useState, useEffect } from "react";
import { useSpring } from 'react-spring';

const [showWebAndAppActivityModal, setShowWebAndAppActivityModal] = useState(false);

const openWebAndAppActivityModal = () => setShowWebAndAppActivityModal(true);

const closeWebAndAppActivityModal = () => setShowWebAndAppActivityModal(false);

const animationOpen = useSpring({
  transform: showWebAndAppActivityModal ? `scale(1)` : `scale(0.85)`,
  config: {
    duration: 175,
    easing: t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t
  }
});

const animationClose = useSpring({
  transform: showWebAndAppActivityModal ? `scale(0.85)` : `scale(1)`,
  config: {
    duration: 300,
    easing: t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t
  }
});

return(
    <>
        <ExpressChooseYourSettingsComponent
            openWebAndAppActivityModal={openWebAndAppActivityModal}
            closeWebAndAppActivityModal={closeWebAndAppActivityModal}
            showWebAndAppActivityModal={showWebAndAppActivityModal}
            animationOpen={animationOpen}
            animationClose={animationClose}
        />
    </>
 );

Component:

showWebAndAppActivityModal,
closeWebAndAppActivityModal,
openWebAndAppActivityModal,
animationOpen,
animationClose,

<Modal
  open={showWebAndAppActivityModal}
  onClose={closeWebAndAppActivityModal}
  closeAfterTransition
  className='modal-ecys'
>
  <animated.div style={showWebAndAppActivityModal ? animationOpen : animationClose}>  
    <Box>
      (divs)
    </Box>
  </animated.div>
</Modal>

Syntax from the MUI Modal docs (2nd attempt)

Container:

import { useSpring } from 'react-spring';
import PropTypes from 'prop-types';
import React, { useState, useEffect } from "react";

const [showWebAndAppActivityModal, setShowWebAndAppActivityModal] = useState(false);

// Handle Modals

    const openWebAndAppActivityModal = () => setShowWebAndAppActivityModal(true);

    const closeWebAndAppActivityModal = () => setShowWebAndAppActivityModal(false);

    const Fade = React.forwardRef(function Fade(props, ref) {
        const {
            children,
            in: open,
            onClick,
            onEnter,
            onExited,
            ownerState,
            ...other
        } = props;
        const style = useSpring({
            from: { scale: 0.85 },
            to: { scale: open ? 1 : 0.85 },
            config: {
                duration: 175,
                easing: t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t,
            },
            onStart: () => {
                if (open && onEnter) {
                    onEnter(null, true);
                }
            },
            onRest: () => {
                if (!open && onExited) {
                    onExited(null, true);
                }
            },
        });

        return (
            <animated.div ref={ref} style={style} {...other}>
              {React.cloneElement(children, { onClick })}
            </animated.div>
        );
    });

    Fade.propTypes = {
        children: PropTypes.element.isRequired,
        in: PropTypes.bool,
        onClick: PropTypes.any,
        onEnter: PropTypes.func,
        onExited: PropTypes.func,
        ownerState: PropTypes.any,
    };

return(
    <>
        <ExpressChooseYourSettingsComponent
            openWebAndAppActivityModal={openWebAndAppActivityModal}
            Fade={Fade}
        />
    </>
 );

Component:

import { Modal, Box } from '@mui/material';
import Backdrop from '@mui/material/Backdrop';

showWebAndAppActivityModal,
Fade,

<Modal
  open={showWebAndAppActivityModal}
  onClose={closeWebAndAppActivityModal}
  closeAfterTransition
  slots={{ backdrop: Backdrop }}
  slotProps={{
    backdrop: {
      TransitionComponent: Fade,
    },
  }}
  className='modal-ecys'
>
  <Fade in={open}>
    <Box>
     (divs)
    </Box>
  </Fade>
</Modal>

Was expecting a simple open animation on open and the close animation on close.

Any help greatly appreciated.