Issue with a JS based slideshow

I need to control slider images with the bottom dot pagination properly. But something I’m missing or doing wrong in the code.

You can check the working demo here- https://playcode.io/2070692

And to me, it looks like the issue is here-

I tried to put control inside dots with this:

const currentSlide = (n) => {
    showSlides((slideIndex = n));
};

const dots = document.querySelectorAll('.dot');

dots.forEach((dot) => {
    dot.addEventListener('click', () => {
        console.log(`${slideIndex}`);
        currentSlide(slideIndex + 1);
    });
});