React-toastify does not slide down smoothly off the screen

Question

I am able to render the react-toastify. However, the problem I am facing is that the toasts do not slide down the screen completely smoothly. I am using cssTransition for animation. The toast folds and does slide off the screen.

Notification starts of below the screen and does not go back below the screen, it just folds before reaching the end of the browser. I am adding the gif of the toasting for reference:

I am not sure why the toast does not slide off the screen completely.

Code inside App.tsx:

import { ToastContainer, cssTransition } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./toastify-custom.css";

const Slide = cssTransition({
  enter: "slideInUp",
  exit: "slideOutDown",
  collapseDuration: 300,
});

return (
  <>
    <ToastContainer
      hideProgressBar={true}
      position="bottom-center"
      transition={Slide}
      icon={false}
      closeButton={false}
      autoClose={2000}
      pauseOnHover={false}
  />

Code toastify-custom.css:

/* Custom animation */
@keyframes slideInUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%) ease-out;
  }
}

.slideInUp {
  animation-name: slideInUp;
  animation-duration: 300ms;
}

.slideOutDown {
  animation-name: slideOutDown;
  animation-duration: 300ms;
}

Edit: I have made changes to the CSS file as suggested by Kaneki21 but it did not work.