ActiveIndex not working

[WeiWang120]

Hi I am trying to write a carousel that auto plays and stop auto-play once the activeIndex is updated

const ProductCarousel = ({ images, index = -1 }: ProductCarouselProps) => {
  console.log(index)
  return (
    <div className="w-full">
      <AliceCarousel
        autoPlay={index < 0}
        infinite
        // autoPlayStrategy="none"
        autoPlayInterval={1000}
        animationDuration={1000}
        // animationType="fadeout"
        responsive={responsive}
        // autoHeight
        disableButtonsControls
        items={images}
        activeIndex={index}
        // onSlideChanged={(item) => setActiveIndex(item.item)}
      />
    </div>
  )
}

But when the index is updated, the carousel does not jump to the correct one, it simply does nothing

[WeiWang120]

I think it is because the images changed, so the whole component rerendered