If someone could give me some advice on this problem I have spent a long time on.

I have an array of images and want to have an animated horizontal infinite scroll , but underneath the animating images I have some buttons (which will select an image to view)
I need to sync the images being viewed in the infinite scroll with its button (which will have some css property to indicate that its the button for the image being viewed at that moment)

So I’d do something like

const x = useMotionValue(0)
const [index, setIndex] = useState(0)

 useEffect(() => {

      const controls = animate(x, [fromValue,toValue], {
        ease: "linear",
        duration: duration,
        repeat: Infinity,
        repeatType: "loop",
        repeatDelay: 0,

     })
 

    return controls?.stop;
  }, [x, duration,fromValue, toValue]);

< motion.div style={{ x }} .../>

Below the animated images in a separate component, I have a ‘Dots’ component that renders buttons as round circles. This component takes an index of the currently active image (the image currently in view) and a list of images. This ‘Dot’ component renders a button for each image and for the button for image in view , sets some css property (e.g. border 1px solid red)

<Dots activeIndex={index} list={imageList}/>

My question is how do I update the index (using setIndex) when the next image is animated into the view ? There seems no clear way to do this.

I know I can use the following

x.onChnage (value) => {
  // but this just gives me an x position not an index or id of the current image
  // and fires on each pixel moved
}

Thanks for any comments