Slide show skips slide

I have added manual and automated play in my slide show,
But the problem is when the automated slide show goes from slide number 1 to slide number 2 and if click on slide number 1 button manually, the next automated slide goes to slide number 3 directly from 1 instead of 2, skipping it

how to fix it?

this is my code

$w.onReady(function () {

let states = ['box25', 'box32', 'box30', 'box28'];
let stateNumber = 0;

function slideShow() {
    $w('#multiStateBox1').changeState(states[stateNumber]);
    if (stateNumber<states.length - 1) {
        stateNumber++;
    } else {
        stateNumber = 0
    }
    setTimeout(slideShow,2000);

}
slideShow();
});

Maybe try this here

$w.onReady(function () {

let states = ['box25', 'box32', 'box30', 'box28'];
let stateNumber = 0;
let isManualChange = false;

function slideShow() {
    if (!isManualChange) {
        $w('#multiStateBox1').changeState(states[stateNumber]);

        if (stateNumber < states.length - 1) {
            stateNumber++;
        } else {
            stateNumber = 0;
        }
    }

    setTimeout(slideShow, 2000);
}

slideShow();

$w('#multiStateBox1').onClick(() => {
    // Pause the automated slideshow when a manual click occurs
    isManualChange = true;

    // Add any additional logic for the manual click if needed

    // Resume the automated slideshow after a brief delay
    setTimeout(() => {
        isManualChange = false;
    }, 2000);
});

});