Invariant Violation: inputRange must be monotonically non-decreasing NaN,NaN,NaN

Question

So I am following a video tutorial by Catalin Miron on Creating a timer with react native(Link to video here). But the problem is 9:57 minutes into the video and my app is giving me this error:

Invariant Violation: inputRange must be monotonically non-decreasing NaN,NaN,NaN

here is my App.tsx( Yea this is a typescript react native project )

import * as React from "react";
import {
  Vibration,
  StatusBar,
  Easing,
  TextInput,
  Dimensions,
  Animated,
  TouchableOpacity,
  FlatList,
  Text,
  View,
  StyleSheet,
} from "react-native";

const { width, height } = Dimensions.get("window");

const colors = {
  black: "#323F4E",
  red: "#F76A6A",
  text: "#ffffff",
};

const timers = [...Array(13).keys()].map((i) => (i === 0 ? 1 : i * 5));
const ITEM_SIZE = width * 0.38;
const ITEM_SPACING = (width - ITEM_SIZE) / 2;

export default function App() {
  const scrollX = React.useRef(new Animated.Value(0)).current;

  return (
    <View style={styles.container}>
      <StatusBar hidden />
      <Animated.View
        style={[
          StyleSheet.absoluteFillObject,
          {
            justifyContent: "flex-end",
            alignItems: "center",
            paddingBottom: 100,
          },
        ]}
      >
        <TouchableOpacity onPress={() => {}}>
          <View style={styles.roundButton} />
        </TouchableOpacity>
      </Animated.View>
      <View
        style={{
          position: "absolute",
          top: height / 3,
          left: 0,
          right: 0,
          flex: 1,
        }}
      >
       -----------------------------------------Problem Start 
        <Animated.FlatList
          data={timers}
          keyExtractor={(item) => item.toString()}
          horizontal
          bounces={false}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { x: scrollX } } }],
            { useNativeDriver: true }
          )}
          showsHorizontalScrollIndicator={false}
          snapToInterval={ITEM_SIZE}
          decelerationRate="fast"
          style={{ flexGrow: 0 }}
          contentContainerStyle={{
            paddingHorizontal: ITEM_SPACING,
          }}
          // eslint-disable-next-line @typescript-eslint/ban-types
          renderItem={(itemData: object, index: number) => {
            const inputRange = [
              (index - 1) * ITEM_SIZE,
              index * ITEM_SIZE,
              (index + 1) * ITEM_SIZE,
            ];

            const opacity = scrollX.interpolate({
              inputRange,
              outputRange: [0.4, 1, 0.4],
            });

            return (
              <View
                style={{
                  width: ITEM_SIZE,
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <Animated.Text style={[styles.text, { opacity }]}>
                  {itemData.item}
                </Animated.Text>
              </View>
            );
          }}
        />
       -----------------------------------------Problem End
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.black,
  },
  roundButton: {
    width: 80,
    height: 80,
    borderRadius: 80,
    backgroundColor: colors.red,
  },
  text: {
    fontSize: ITEM_SIZE * 0.7,
    fontFamily: "monospace",
    color: colors.text,
    fontWeight: "900",
  },
});

Other than typescript this app also uses Expo to work Please help me find a solution to this I looked through the google searches and github pages and there they are talking about carousel not Flatlist. Thank you in advance Also note the const values are working and are not undefined