В обработчиках меняю классы. const animationClass = { 'slider__item--show-to-left': false,

'slider__item--show-to-right': false,
};

const handleShowNextSlide = () => {
const nextIdx = ((currentIdx + 1) % chunkedCitiesWheaterList.length);
animationClass['slider__item--show-to-left'] = true;
animationClass['slider__item--show-to-left'] = false;
// console.log('animationClass', animationClass);
setCurrentIdx(nextIdx);
};

const handleShowPrevSlide = () => {
const prevIdx = (
(currentIdx + (slideElementsCount - 1)) % chunkedCitiesWheaterList.length
);
animationClass['slider__item--show-to-left'] = false;
animationClass['slider__item--show-to-left'] = true;
// console.log('animationClass', animationClass);
setCurrentIdx(prevIdx);
};

потом при рендеринге их применяю:

const classes = cn({
...animationClass,
slider__item: true,
'slider__item--active': currentIdx === index,
});

console.log('classes', classes);

return (
<li key={uniqueId()} className={classes}>
{chunkedElement.map(renderCitiesWeatherItems)}
</li>
);

Но вот сюда они всегда приходят в значении false, не успевают обновиться я так понимаю.
Потому что, если выводить в консоль в обработчиках, то все норм.
Если вывести в консоль animationClass во втором блоке, то там false

Как то победить эту проблему можно?

Обьект с классами внутри рендера обьявлен?