I want to rotate the icon with animation in expandable

Question

I want to perform a little animation for rotate a icon to 45 degree in each item passed. That animation is working, but all the icons in the list are rotating at the same time.

I want the icon animation to work properly for each item, and rest stay stable.

  const Accordion = ({ items }) => {
  const [selectedCategory, setSelectedCategory] = useState('');
  const animationController = useRef(new Animated.Value(0)).current;
  const [visibleItemIndex, setVisibleItemIndex] = useState(null);

  const toggleItem = (index, item) => {
    const config = {
      duration: 400,
      toValue: visibleItemIndex === index ? 0 : 1,
      useNativeDriver: true,
    };
    Animated.timing(animationController, config).start();
    LayoutAnimation.configureNext(toggleAnimation);
    setSelectedCategory(item?.slug);
    setVisibleItemIndex(prevIndex => (prevIndex === index ? null : index));
  };

  return (
    <View>
      {items.map((item, index) => (
        <View key={item?.slug} style={{ overflow: 'hidden' }}>
          <TouchableOpacity
            style={{ padding: 5, flexDirection: 'row', alignItems: 'center' }}
            onPress={() => toggleItem(index, item)}>
            <View style={styles.viewContainer}>
              <View style={styles.imageTitleContainer}>
                <Animated.View
                  style={{
                    transform: [
                      {
                        rotateZ: animationController.interpolate({
                          inputRange: [0, 1],
                          outputRange: ['0deg', '45deg'],
                        }),
                      },
                    ],
                  }}>
                  <Image
                    source={add}
                    style={{ height: 25, width: 25 }}
                    resizeMode="contain"
                  />
                </Animated.View>
                <Image
                  source={{ uri: item?.image }}
                  style={{ height: 32, width: 32, marginHorizontal: 10 }}
                  resizeMode="contain"
                />
                <Text style={styles.textHeader}>{item?.name}</Text>
              </View>
              <Animated.View
                style={{
                  transform: [
                    {
                      rotateZ: animationController.interpolate({
                        inputRange: [0, 1],
                        outputRange: ['0deg', '90deg'],
                      }),
                    },
                  ],
                }}>
                <Image
                  source={arrowWest}
                  style={{ height: 15, width: 15 }}
                  resizeMode="contain"
                />
              </Animated.View>
            </View>
          </TouchableOpacity>
          {visibleItemIndex === index && (
            <View style={{ backgroundColor: Colors.primary50, padding: 10 }}>
              {/* Content */}
            </View>
          )}
        </View>
      ))}
    </View>
  );
};

export default Accordion;

I tried with taking array of reference but not working. const refs = useRef(items.map(() => new Animated.Value(0)));