Estoy usando Swiper js para mi control deslizante React.

Estoy recorriendo un objeto y devolviendo las diapositivas Swiper.

Tengo algunos botones (de filtro) como diapositivas deslizantes, para filtrar el contenido al seleccionar/hacer clic en un botón (pasando el estado Reaccionar).

La diapositiva activa (que obtiene la clase css swiper-slide-active por la api swiper) siempre debe estar centrada.

Eso está funcionando bien desde la API con los siguientes accesorios:

diapositivas centeredSlides y slideToClickedSlide

Pero cuando 'deslizo' las diapositivas hacia la izquierda o hacia la derecha, la diapositiva activa del deslizador se centra, pero mi otra lógica en el botón seleccionado data-active={true} ahora no está sincronizada con la diapositiva activa del deslizador.

¿Cómo arreglar esto?

Aquí está CodeSandbox , con un ejemplo de lo que tengo hasta ahora.