How to dinamically update the value coming from useAnimatedStyle - Reanimated 2

Question

Say that I have a component where I create child components based on the number of elements passed from the parent ( think of it as a page indicator, for example ). What I would like to do, is to animate the transition between these dots (their backgroundColor) depending on which one is active.

I have tried in a few ways to match the current value to the index of the child element, however, since I don't have the index beforehand, my attemps have failed. I am posting the basic component down there without my fail attemps to animate it so it illustrates better what I am talking about.

How would one go about doing that in reanimated 2?

const component = ({active, amountOfDots}) => {
  const dotsArray = Array(amountOfDots).fill(0);
  return (
    <View style={{}}>
      {dotsArray.map(() => {
        return <Animated.View style={{}} />;
      })}
    </View>
  );
};