REACT-Toastify - Duplicates toasts

if you use ToastContainer and toast function each together, you will see two toastify. You should use only one.

---

Your code design some complex. Let me show how to use basic toastify you will understand it.

Firstyle import package. (Step 1)

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

Now, you can call toast. (Step 2)

 toast.configure();

 toast.success("Success Notification !", {
    position: toast.POSITION.TOP_CENTER
  });

  toast.error("Error Notification !", {
    position: toast.POSITION.TOP_LEFT
  });

  toast.warn("Warning Notification !", {
    position: toast.POSITION.BOTTOM_LEFT
  });

  toast.info("Info Notification !", {
    position: toast.POSITION.BOTTOM_CENTER
  });

that's it.

Add your <ToastContainer/> to App.tsx or whatever you named your default root App.js file. After that, DO NOT add <ToastContainer/> to elsewhere.

      <ToastContainer 
            position='top-right' 
            autoClose={5000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
        />