I am using Swiper js for my React slider.

I'am looping over an Object and return the Swiper slides.

I have some (filter) buttons as swiper slides, to filter content when selecting/clicking a button (by passing React state).

The active slide (which gets css class swiper-slide-active by the swiper api) should always be centered.

That's working fine from the api with the following props:

centeredSlides and slideToClickedSlide

But when I 'swipe' the slides to left or right, the swiper active slide get centered, but my other logic on the selected button data-active={true} is now not in sync with swipers active slide.

How to fix this?

Here is the CodeSandbox, with an example what I have so far.