I hope you are all doing very well, I just wanted to know how to create an animation when a React component is unmounted. If it can be achieved with CSS, that would be even better.

I have attached two React TSX components below, feel free to modify them as you see fit:

import { useState } from "react";
import { useStatus } from "../../../store/error.store";

export const useCleaningMessages = () => {
const {clearMessagesStatus } = useStatus()
const [hidden, setHidden] = useState<boolean>(false)
const handleClose = () => {
setHidden(true)
clearMessagesStatus()
};

    return { hidden, handleClose }

};

import { GrClose, GrStatusGood } from "react-icons/gr"
import { useCleaningMessages } from "./hooks/useCleaningMessages"

const AlertSuccess = ({message}: {message: string}) => {
const { handleClose, hidden } = useCleaningMessages()
return (
<div className={`${!message  && 'hidden'} ${hidden && 'hidden'} flex animation-bottom-center min-w-[320px] max-w-[320px] justify-center items-center py-1 px-2 rounded-md text-green-600 font-extrabold bg-green-100 shadow-lg bg-opacity-60 bg-fixed bg-cover bg-center mx-auto relative backdrop-blur-3xl          `} >
<div slot="avatar">
<GrStatusGood className="text-3xl mr-2" />
</div>
<div className="text-xl font-normal  max-w-full flex-initial">
<div className="py-2">Todo a salido bien:
<div className="text-sm font-base">{message}</div>
</div>

            </div>
            
            <button className="relative flex flex-auto flex-row-reverse justify-center cursor-pointer items-center focus:scale-[2] transition-all" onClick={handleClose}>
               <GrClose className="text-3xl ml-2 hover:bg-green-200 hover:p-1 rounded-full transition-all ease-out" />
            </button>
        </div>
    )

}

export default AlertSuccess