Rendering a collection of components using shared values.

[gpavlov21]

Hello, I want to render 7 containers, and I want to animate their background-color onPress.When I select the first one everything is fine, and it animates, but when I press on the second one, the background of the first container disappears.

Snack: https://snack.expo.dev/@georgipavlov/bold-french-fries

The container :

import { LinearGradient } from "expo-linear-gradient"
const GradientcontainerAnimated = ({ categories, category, setCategories }) => {
  const colors = category.color;
  const width = useSharedValue("0%");

  const animatedStyle = useAnimatedStyle(() => {
    return { width: width.value };
  });

  const AnimatedLinearGradient =
    Animated.createAnimatedComponent(LinearGradient);

  const handleSelect = () => {
    let data = [...categories];
    const index = data.indexOf(category);
    const toValue = !category.selected ? "100%" : "0%";
    width.value = withTiming(toValue, {
      duration: 500,
      easing: Easing.inOut(Easing.ease),
    });

    data[index].selected = !data[index].selected;
    setCategories([...data]);
  };

  return (
    <TouchableOpacity
      style={[
        styles.categoryContainer,
      ]}
      onPress={() => handleSelect()}
    >
      <AnimatedLinearGradient
        colors={colors}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={[styles.gradientContainer, animatedStyle]}
      />
      <LinearGradient style={styles.gradientCircle} colors={colors} />
      <AppText style={{ marginTop: 15 }}>{category.category}</AppText>
    </TouchableOpacity>
  );
}; 

And this is how i render them:

export default function SelfTherapyChooseCategory() {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    let data = [];
    Object.keys(categoriesData).forEach((category, index) => {
      data.push({
        category: category,
        selected: false,
        color: categoriesData[category].color,
      });
    });
    setCategories([...data]);
  }, []);

  return (
    <Screen>
      <ScrollView>
        {categories.map((category, index) => {
          return (
            <GradientcontainerAnimated
              key={index}
              categories={categories}
              category={category}
              setCategories={setCategories}
            />
          );
        })}
      </ScrollView>
    </Screen>
  );
}