Stop tsParticles Animation

Question

I am trying to stop the animation when the user clicks on the ID again but getting errors. particles.js?v=1707902138:140 Uncaught (in promise) TypeError: tsParticles.stop is not a function at toggleParticles (particles.js?v=1707902138:140:27)

import { tsParticles } from "https://cdn.jsdelivr.net/npm/tsparticles-engine@2/+esm";
import { loadFull } from "https://cdn.jsdelivr.net/npm/tsparticles@2/+esm";

let particlesLoaded = false; // Flag to track if particles are loaded

const baseEmitterConfig = (direction, position) => {
    return {
        direction,
        rate: {
            quantity: 15,
            delay: 0.3
        },
        size: {
            width: 0,
            height: 0
        },
        spawnColor: {
            value: "#9025bd",
            animation: {
                h: {
                    enable: true,
                    offset: {
                        min: -1.4,
                        max: 1.4
                    },
                    speed: 2,
                    sync: false
                },
                l: {
                    enable: true,
                    offset: {
                        min: 40,
                        max: 60
                    },
                    speed: 0,
                    sync: false
                }
            }
        },
        position
    };
};

async function toggleParticles() {
    if (!particlesLoaded) {
        await loadFull(tsParticles);

        await tsParticles.load("tsparticles", {
            background: {
                color: "transparent"
            },
            particles: {
                angle: {
                    value: 0,
                    offset: 30
                },
                move: {
                    enable: true,
                    outModes: {
                        top: "none",
                        default: "destroy"
                    },
                    gravity: {
                        enable: true
                    },
                    speed: { min: 5, max: 20 },
                    decay: 0.01
                },
                number: {
                    value: 0,
                    limit: 300
                },
                opacity: {
                    value: 1
                },
                shape: {
                    type: ["circle", "square", "triangle"]
                },
                size: {
                    value: { min: 2, max: 5 },
                    animation: {
                        count: 1,
                        startValue: "min",
                        enable: true,
                        speed: 5,
                        sync: true
                    }
                },
                rotate: {
                    value: {
                        min: 0,
                        max: 360
                    },
                    direction: "random",
                    animation: {
                        enable: true,
                        speed: 60
                    }
                },
                tilt: {
                    direction: "random",
                    enable: true,
                    value: {
                        min: 0,
                        max: 360
                    },
                    animation: {
                        enable: true,
                        speed: 60
                    }
                },
                roll: {
                    darken: {
                        enable: true,
                        value: 25
                    },
                    enable: true,
                    speed: {
                        min: 15,
                        max: 25
                    }
                },
                wobble: {
                    distance: 30,
                    enable: true,
                    speed: {
                        min: -15,
                        max: 15
                    }
                }
            },
            emitters: [
                baseEmitterConfig("top-right", { x: 0, y: 30 }),
                baseEmitterConfig("top-left", { x: 100, y: 30 })
            ]
        });

        particlesLoaded = true; // Mark as loaded
    } else {
        await tsParticles.stop("tsparticles"); // Stop the particles animation
        let canvasEl = document.querySelector('.tsparticles-canvas-el');
        if (canvasEl) {
            canvasEl.remove(); // Remove the canvas from the DOM
        }
        particlesLoaded = false; // Reset the flag
    }
}

document.getElementById("litparticles").addEventListener("click", function() {
    toggleParticles();
});