在FlatList中设置状态

Question

我正在创建带有多个状态对象的简单组件，我想通过FlatList内部设置状态值，但是原因是当运行代码时，单击我调用回调函数页面的按钮变为空白然后出现错误

import React, {useState} from 'react';
import {View, StyleSheet, Text, Button, FlatList} from 'react-native';
import ColorCounter from '../components/ColorCounter';

const SquareScreen = () =>{
    const [Colors,SetColors] = useState([
        {
            Name : 'Red',
            Value : 0
        },
        {
            Name : 'Green',
            Value : 0
        },
        {
            Name: 'Blue',
            Value : 0
        }
    ]);

    return(
        <View>
            <FlatList keyExtractor={Key => Key.Name} data={Colors} renderItem={({item}) => {
                return (

                    <ColorCounter OnIncrease={() => {SetColors(item.Value + 1)}} OnDecrease={() => {SetColors(item.Value - 1)}} Name={item.Name} />
                );
            }}/>
        </View>
    );
};