React transition and React reveal error on enter component

Question

I'm trying to implement a transition effect in my custom toast. I'm using react-transition-group and react-reveal to do it. The documentation seems very simple 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 enter exit>
            {
              toasts.map((toast) => {
                return (
                  <Fade key={toast.id} top>                    
                      <Toast
                        id={toast.id}
                        key={toast.id}
                        type={toast.type}
                        message={toast.message}
                      />
                  </Fade>
                )
              })
            }
          </TransitionGroup>
        </div>
      )}
    </>
  );
}