React Native Flatlist and 'react-native-animatable' - item's animation is triggered before the item is shown

Question

I'm creating a carousel component that shows items one by one horizontally, using Flatlist. The items of Flatlist has their own animation that start automatically. My expectation is that the animation will start once the item is scrolled to. The problem is that all items start their animation despite of not being scrolled to yet.

My Slider component looks like this:

const _renderItem = ({item, index}) => <MySliderChild />
const Slider = (itemSize) => {
    return (
        <View>
          <FlatList
          showsHorizontalScrollIndicator={false}
          data={sliderData}
          getItemLayout={(data, index) => ({
            length: itemSize.width,
            offset: itemSize.width * index,
            index,
          })}
          renderItem={_renderItem}
          horizontal
          pagingEnabled
          />
        </View>
    )
}

The component I use to render Flatlist child looks like this:

import * as Animatable 'react-native-animatable'

const MySliderChild = (params) => {
    const _animation: Animatable.CustomAnimation = {0: {opacity: 0}, 1: {opacity: 1}};
    return (
        <Animatable.View animation={_animation} duration={3000}>
            ...
        </Animatable.View>
    )
}

I think Flatlist mounts all child items at the same time, therefore, the animation of all items start together. Is there a way to make Flatlist child items mounted once they are scrolled to, so that the animation starts when item is on the view area? Thank you in advance!