Fade not working on enter

[aclimarin]

I'm trying to implement a transition effect in my custom toast and i just followed this steps https://www.react-reveal.com/examples/advanced/todo/

The problem is that it is olny working when the toast is closing. It dosn`t work when appear.

import Toast from ".";
import { useContext } from "react"
import { ToastStateContext } from "./context";
import { TransitionGroup } from "react-transition-group";
import Fade from 'react-reveal/Fade';

export default function ToastContainer() {
  const { toasts } = useContext(ToastStateContext);
  return (
    <>
      {toasts &&
        (
          <div className="absolute top-24 pt-1 right-2">
            <TransitionGroup appear enter exit>
              {
                toasts.map((toast) => {
                  return (
                    <Fade key={toast.id} collapse top>
                      <Toast
                        id={toast.id}
                        key={toast.id}
                        type={toast.type}
                        message={toast.message}
                      />
                    </Fade>
                  )
                })
              }
            </TransitionGroup>
          </div>)
      }
    </>
  );
}