Im working on a custom toast notification. But the hard part to me is I've not been able to hide the toast notification correctly. When I make a click to show it the toast has an animation to the left the problem is when the toast is gonna hide just disapear and it does not slide to the right. Im working with react and tailwind css. Here is the code. also leave a link to the case. https://codesandbox.io/s/toast-notification-ucx2v?file=/src/components/toastNotification.jsx I hope you can help me guys.

-----App component-----

import { useEffect, useState } from "react";
import ToastNotification from "./components/toastNotification";
import "./styles.css";

export default function App() {
  const [showToast, setShowToast] = useState(false);

  const addToCart = () => {
    setShowToast(true);
  };

  useEffect(() => {
    setTimeout(() => {
      setShowToast(false);
    }, 3000);
  }, [showToast]);

  return (
    <div className="App">
      <ToastNotification showNotification={showToast} />
      <button
        className="w-1/2 p-2 flex items-center justify-center rounded-md bg-indigo-400 text-white"
        type="submit"
        onClick={addToCart}
      >
        Add to cart
      </button>
    </div>
  );
}

-----Toast component-----

import React, { useEffect, useState } from "react";

const ToastNotification = ({ showNotification }) => {
  useEffect(() => {
    setTimeout(() => {}, 5000);
  }, []);

  return (
    <>
      {showNotification === false ? null : (
        <div className="static z-20">
          <div
            className={`${
              showNotification
                ? "animate__animated animate__slideInRight absolute top-16 right-4 flex items-center text-white max-w-sm w-full bg-green-400 shadow-md rounded-lg overflow-hidden mx-auto"
                : "animate__animated animate__slideOutRight absolute top-16 right-4 flex items-center text-white max-w-sm w-full bg-green-400 shadow-md rounded-lg mx-auto"
            }`}
          >
            <div class="w-10 border-r px-2">
              <i class="far fa-check-circle"></i>
            </div>
            <div class="flex items-center px-2 py-3">
              <div class="mx-3">
                <p>add to car</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default ToastNotification;