экстрад-данные собственного плоского списка реакции не работают

#react-native #expo #flatlist

Вопрос:

почему мой плоский список не перерисовывается ? Я использую дополнительные данные.

 const colors = [
        {
          key: "1",
          color: "white"
        },
        {
          key: "2",
          color: "black"
        },
        {
          key: "3",
          color: "#2b80ff"
        },
        {
          key: "4",
          color: "red"
        },
        {
          key: "5",
          color: "yellow"
        },
        {
          key: "6",
          color: "pink"
        },
        {
          key: "7",
          color: "gold"
        }
      ]
...
  const [productColor, setProductColor] = useState({
    id: null,
    color: null
  });
...
              <FlatList
                  data={colors}
                  horizontal
                  extraData={productColor}
                  keyExtractor={item => item.key}
                  renderItem={({ item }) => {
                    return (
                      <TouchableOpacity onPress={() => setProductColor(prevState => {
                        return {
                          ...prevState,
                          id,
                          color: item.color
                        }
                      })} style={[styles.colors, { backgroundColor: item.color, borderColor: productColor.color === item.color ? 'blue' : '#ccc'}]}>
                        <Text></Text>
                      </TouchableOpacity>
                    )
                  }}
                />
 

………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………