Why doesn’t the infobox change when I first click left after clicking right a few times? (The same problem occurs when going from left to right)

nextBtn.addEventListener('click', () => {
    indexSlider++;
    imgSlider.style.transform = `rotate(${indexSlider * -90}deg)`;

    index++;
    if (index > imgFruits.length - 1) {
        index = 0;
    }

    updateActiveItems(1);
    updateInfo(index); 
});

prevBtn.addEventListener('click', () => {
    indexSlider--;
    imgSlider.style.transform = `rotate(${indexSlider * -90}deg)`;

    index--;
    if (index < 0) {
        index = imgFruits.length - 1;
    }

    updateActiveItems(-1);
    
    updateInfo(index);
});

function updateActiveItems(direction) {
    document.querySelector('.fruit.active').classList.remove('active');
    imgFruits[index].classList.add('active');

    document.querySelector('.bg.active').classList.remove('active');
    bgs[index].classList.add('active');

    infoSlider.style.transition = 'none';
    infoSlider.style.transform = 'translateY(0)';

    if (direction === 1) {
        infoSlider.appendChild(infoSlider.firstElementChild);
    } else {
        infoSlider.prepend(infoSlider.lastElementChild);
    }

    infoSlider.offsetHeight; // Force reflow
    infoSlider.style.transition = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
    infoSlider.style.transform = direction === 1 ? 'translateY(-25%)' : 'translateY(25%)';

    infoBox.style.justifyContent = direction === 1 ? 'flex-start' : 'flex-end';
}

infoSlider.addEventListener('transitionend', () => {
    infoSlider.style.transition = 'none';
    infoSlider.style.transform = 'translateY(0)';

    setTimeout(() => {
        infoSlider.style.transition = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
    }, 0);
});

initialize();

I just want a circle of changing fruit names. forward and backward. Arranging queque is the main problem. I also tried this:

nextBtn.addEventListener('click', () => {

    indexSlider++;
    imgSlider.style.transform = rotate(${indexSlider * -90}deg);

    index++;
    if (index > imgFruits.length - 1) {
        index = 0;
    }

    document.querySelector('.fruit.active').classList.remove('active');
    imgFruits[index].classList.add('active');

    document.querySelector('.bg.active').classList.remove('active');
    bgs[index].classList.add('active');

    if (direction == 1) {
        infoSlider.prepend(infoSlider.lastElementChild);
    }
    
    direction = -1;

    infoBox.style.justifyContent = 'flex-start';
    infoSlider.style.transform = 'translateY(-25%)';

});

prevBtn.addEventListener('click', () => {

    indexSlider--;
    imgSlider.style.transform = rotate(${indexSlider * -90}deg);

    index--;
    if (index < 0){
        index = imgFruits.length - 1;
    }

    document.querySelector('.fruit.active').classList.remove('active');
    imgFruits[index].classList.add('active');

    document.querySelector('.bg.active').classList.remove('active');
    bgs[index].classList.add('active');

    if (direction == -1) {
        infoSlider.appendChild(infoSlider.firstElementChild);
    }
    
    direction = 1;

    infoBox.style.justifyContent = 'flex-end';
    infoSlider.style.transform = 'translateY(25%)';

});

infoSlider.addEventListener('transitionend', () => {

    if (direction == -1) {
        infoSlider.appendChild(infoSlider.firstElementChild);
    }
    else if (direction == 1) {
        infoSlider.prepend(infoSlider.lastElementChild);
    }

    infoSlider.style.transition = 'none';
    infoSlider.style.transform = 'translateY(0)';

    setTimeout(() => {
        infoSlider.style.transition = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
    })

})

This one starts good but stops at 3rd fruit and previous button doesn’t work properly.

const infoData = [
    { title: 'Blueberry', description: 'Blueberries are sweet and nutritious.' },
    { title: 'Orange', description: 'Oranges are rich in vitamin C.' },
    { title: 'Green Apple', description: 'Green apples are tart and crisp.' },
    { title: 'Strawberry', description: 'Strawberries are juicy and delicious.' },
];

I tried these kind of solutions but I did not like these style and animation. My current style in css is good but js part doesn’t work well.