How to prevent duplicates calling mutiple child component instances that includes toastify notifications?

Question

I am using several toast component instances, passing in each case different parameters.

When the user clicks a specific button to display a type of toast, it appears overlapped 4 times .

This is the code:

import Toast from "../toasts/Toast"

export default function ToastSection (){
   
    return (
        <section>
            <h2>Toasts</h2>
            <h3>With image</h3>
            <div className="toasts">
                <Toast
                    type="info"
                    title = "Information"
                    message="Please read updated information"
                    id={1}
                />   
                <Toast
                    type= "success"
                    title = "Success"
                    message="Your work has been saved"
                    id={2}
                />     
                <Toast
                    type= "warn"
                    title = "Warning"
                    message="A network error was detected"
                    id={3}
                />  
                <Toast
                    type= "error"
                    title = "Error"
                    message="Please re-save your work again"
                    id={4}
                />  
            </div>
        </section>
    )
}

/* eslint react/prop-types: 0 */
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; 

export default function Toast (
    { 
        type = "",
        title = "Example title",
        message = "This is an example message",
        id
    }
){

    const toastParameters = {
        position: 'top-right',
        autoClose: 2000,
        hideProgressBar: true, 
        closeOnClick: false, 
        pauseOnHover: false, 
        draggable: false,
        className: `toast ${type}`
    }

    function Message() {
        return (
            <div>
                <p className="toast-title">{title}</p>
                <p className="toast-message">{message}</p>
            </div>
         )
      }

    
    function showToast() {
       
        // Check if the toast with the same identifier is already active
        const existingToast = toast.isActive(id);

        // If a toast with the same identifier exists, don't show a new one
        if (!existingToast) {

            if (type === "info") {
                toast.info(Message, { ...toastParameters, toastId:id })
            }
            else if (type === "success") {
                toast.success(Message, { ...toastParameters, toastId:id })
            }
            else if (type === "warn") {
                toast.warn(Message, { ...toastParameters, toastId:id })
            }
            else if (type === "error") {
                toast.error(Message, { ...toastParameters, toastId:id })
            }
            else {
                toast(Message, { ...toastParameters, toastId:id })
            }
        }
    } 
   

    return (
        <>
            <button className={type} onClick={showToast}>
                {type}
            </button>
            <ToastContainer />
        </>
    )

}

buttons screenshot

Each button displays a type of notification.

I just want to display each notification once, not 4 times overlapped each of them.