React Native CheckBox and FlatList: Cannot Toggle, and can only select each item once

I am using import CheckBox from '@react-native-community/checkbox';.

I am only able to 'select' each 'item' once and cannot toggle it (change or re-toggle).

Any help would be appreciated and if there's alternate plugins/packages available feel free to suggest it.

Code snippet below:

 import CheckBox from '@react-native-community/checkbox';

 export default class FrCreateScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            timeSlots: [
                { id: '1', time: '10am - 11am' },
                { id: '2', time: '11am - 12pm' },
                { id: '3', time: '12pm - 1pm' },
                { id: '4', time: '1pm - 2pm' },
                { id: '5', time: '2pm - 3pm' },
                { id: '6', time: '3pm - 4pm' },
                { id: '7', time: '4pm - 5pm' },
                { id: '8', time: '5pm - 6pm' },
            ],

            //checkBox
            checked: false,
        }
    }

    checkBox(value) {
        this.setState({
            checked: !value,
        })
    }

    getAppointmentTimePage() {
        const { checked, timeSlots } = this.state;

        return (
            <View>
                <Text style={[styles.title, { marginTop: 20 }]}>Select Appointment Time:</Text>
                {<FlatList
                    data={timeSlots}
                    keyExtractor={(times) => times.id}
                    renderItem={({ item }) => {
                        return (
                            <View style={styles.containerTime}>
                                <Text style={styles.textTime}>{item.time}</Text>
                                <CheckBox
                                    value={checked}
                                    onChange={() => this.checkBox(item.id)}
                                />
                            </View>
                        );
                    }}
                />}
                <TouchableOpacity style={styles.addContainer}>
                    <Text style={styles.addText}>Add Appointment</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            <ScrollView>
                {this.getAppointmentTimePage()}
            </ScrollView>
        )
    };
};