如何在array.map上仅为按下的索引设置动画

import React, { useState } from 'react';
import { View, Animated, TouchableOpacity } from 'react-native';

const MyComponent = () => {
  const [animationStates, setAnimationStates] = useState([]);

  const handlePress = (index) => {
    const newAnimationStates = animationStates.map((state, i) => i === index);
    setAnimationStates(newAnimationStates);
  };

  return (
    <View>
      {data.map((item, index) => (
        <TouchableOpacity key={index} onPress={() => handlePress(index)}>
          <Animated.View
            style={{
              opacity: animationStates[index] ? 1 : 0, // 根据动画状态决定是否显示
              transform: [
                {
                  scale: animationStates[index] ? 1.2 : 1, // 根据动画状态决定是否缩放
                },
              ],
            }}
          >
            {/* 渲染元素内容 */}
          </Animated.View>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default MyComponent;