Getting this typescript issue 'Type 'number' is not assignable to type 'Mapping'.ts(2322)' This occurs when trying to add an Animated event on scroll... typescript knowledge is a bit sparse wondering if anyone could point me in the right direction? please :)

ScreenShot of the issue

Heres the code I have rendering a FlatList

const Carousel: FunctionComponent<CarouselProps> = ({ data }) => {
  if (data && data.length) {
    return (
      <View>
        {data && data.length && (
          <FlatList
            data={data}
            keyExtractor={(item, index) => 'key' + index}
            horizontal
            pagingEnabled
            scrollEnabled
            scrollEventThrottle={16}
            snapToAlignment='center'
            decelerationRate={'fast'}
            showsHorizontalScrollIndicator={false}
            renderItem={({ item }) => {
              return <CarouselItem item={item} />;
            }}
            onScroll={Animated.event([{nativeElement: { contentOffset: { x: screenX }}}])}
          />
        )}
        <View style={styles.dotView}>
          {data.map((_: any, i: any) => {
            let opacity = position.interpolate({
              inputRange: [i - 1, i, i + 1],
              outputRange: [0.3],
              extrapolate: 'clamp'
            });
            return (
              <Animated.View
                key={i}
                style={{
                  opacity,
                  height: 10,
                  width: 10,
                  margin: 8,
                  borderRadius: 5
                }}
              />
            );
          })}
        </View>
      </View>
    );
  } else {
    return null;
  }
}