`closeToast` does not work

Here is a sample from the doc, you can also try it on codesandbox :

import React from "react";
import { ToastContainer, toast } from "react-toastify";

const Msg = ({ closeToast, toastProps }) => (
  <div>
    Lorem ipsum dolor {toastProps.position}
    <button>Retry</button>
    <button onClick={closeToast}>Close</button>
  </div>
);

export default function App() {
  const displayMsg = () => {
    toast(<Msg />);
    // toast(Msg) would also work
  };

  return (
    <div>
      <button onClick={displayMsg}>Click me</button>
      <ToastContainer />
    </div>
  );
}

The toast should close when the close button is clicked, but it’s not. I tried in practice in my own code, it does not work either.

({ closeToast, toastProps }) => closeToast() // Broken
({ closeToast, toastProps }) => toastProps.closeToast() // Broken
({ closeToast, toastProps }) => toastProps.deleteToast() // Works, but there is no animation (it's expected I believe)

What’s required to make this work ?

Versions : react-toastify 7.0.3 react 17.0.1

[JesusTheHun]

I c/c’ed the css into my style sheet and I’m customizing it. Things gonna work out ! Thank you for your quick responses

[fkhadra]

Indeed, the lib listens to onAnimatedEnd event to remove the element from the queue. With the minimal stylesheet, the element is removed but after a delay.

Regarding your customization, isn’t it something that can be done by overriding some existing classes?