How to make spring animation on 'FlatList' item react native

Question

I'm trying to make animation in flatlist, something like this, it will have spring animation when moving item

Something like apple music you can see: https://streamable.com/yg1j2j

With the help of @David Scholz, I was able to make exactly the same, here is expo for that: https://snack.expo.dev/@quockhanh210199/animated-list-selection

But problem is, when i enable scroll it will have weird animation, so my question is, how to make the animation behavior correct if i enable scroll, you can see the weird animation if you enable scroll and and more item, or use below code:

import React, {useState, useCallback} from 'react';
import { StyleSheet, Text,View, SafeAreaView, ScrollView, StatusBar, Animated,FlatList,TouchableOpacity  } from 'react-native';

const App = () => {
  const data = [
    {
      id: "1",
      text: "Results",
    },
    {
      id: "2",
      text: "Products",
    },
    {
      id: "3",
      text: "Stores",
    },
     {
      id: "4",
      text: "Stores",
    },
     {
      id: "5",
      text: "Stores",
    },
     {
      id: "6",
      text: "Stores",
    },
  ]

  const [translateValue] = useState(new Animated.Value(0))
  const [selected, setSelected] = useState(0)

  const onPress = React.useCallback(
    (index) => {
      setSelected(index)
      Animated.spring(translateValue, {
        toValue: index * 100,
        velocity: 5,
        useNativeDriver: true,
      }).start()
    },
    [translateValue, setSelected]
  )

return (
    <View style={{ flexDirection: "row", marginTop: 100 }}>
      <Animated.View
        style={[
          {
            position: "absolute",
            backgroundColor: "black",
            top: -5,
            right: 0,
            bottom: 0,
            left: 15,
            width: 70,
            height: 30,
            borderRadius: 12,
            transform: [{ translateX: translateValue }],
          },
        ]}
      />
      <FlatList
        data={data}
        horizontal={true}
        scrollEnabled={true}
        renderItem={({ item, index }) => {
          return (
            <TouchableOpacity onPress={() => onPress(index)}>
              <View style={{ width: 100, borderRadius: 10 }}>
                <Text style={[{ textAlign: "center" }, index === selected ? { color: "white" } : { color: "black" }]}>
                  {item.text}
                </Text>
              </View>
            </TouchableOpacity>
          )
        }}
        keyExtractor={(item) => item.id}
      />
    </View>
  )
  
}
export default App

Please help, thank you so much