React-toastify toasts don't close

Question

I have a react app and I use react-toastify to prompt for certain messages. However, whenever I click the x on the toasts they don't close. They do, however, close when I have autoClose: delay configured, as shown below. I can also drag them away and close that way.

Here is a little utility I have created to make a toast:

import { toast } from 'react-toastify';
export const notifyInfo = (msg, delay = 3000) => {
    toast.info(msg, {
        position: 'top-center',
        autoClose: delay,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined
    });
};

And here is how I use it on the component where I want to display the toast:

import { ToastContainer } from 'react-toastify';
import * as Msg from '../utils/messaging_utils';
...
...
Msg.notifyInfo("Test Message", 2500);

I'd greatly appreciate any pointers on how to make the close on click work.

I'm using the latest react-toastify i.e. version 7.0.4 btw, on downgrading to 6.2.0 I can see the close button work fine.

Answer 1

Solution:

• import react toastify css

import 'react-toastify/dist/ReactToastify.css';

• App.js should import

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';