I have a flatlist of items that renders a side swipe menu. In the side swipe menu I have a button that allows a user to delete an item from the flatlist. I'm trying to make it so the item animates upward when it gets deleted. To do this I've done:

// Holds all the items animated values
const rowTranslateAnimatedValues = {};
  
  // Delete item by index
  const removeItemById = (inventoryItemIndex) => {
Animated.timing(rowTranslateAnimatedValues[inventoryItemIndex], {
  toValue: 0,
  duration: 200,
}).start(() => {
  // filter down item and set data to state
});
};

// Flatlist of items
<FlatList
        data={inventoryData}
        renderItem={({ item, index }) => (
          <Swipeable
            key={index + 5}
            ref={
              (ref) =>
                (rowTranslateAnimatedValues[index] = new Animated.Value(1))) // create a Animated value ref for every item
            }
            onSwipeableRightOpen={() => closeRow(index)}
          >
            <Animated.View
              style={{
                height: rowTranslateAnimatedValues[index].interpolate({ // causes error
                  inputRange: [0, 1],
                  outputRange: [0, 78],
                }),
              }}
            >
              <Layout level={theme === 'dark' ? '3' : '1'}>
                <InventoryItem item={item} />
              </Layout>
            </Animated.View>
          </Swipeable>
        )}
        keyExtractor={(item, index) => index.toString()}
      />

In the Flatlist, I'm creating an Animated.Value ref for every item. The problem is, when I try to access rowTranslateAnimatedValues[index] in the Animated.View I get the error: Cannot read properties of undefined (reading 'interpolate'). I'm confused by this because on the page load, rowTranslateAnimatedValues is populated with Animated values.

How can I solve this? I've been stuck for a while. Any help would be appreciated.