I have this problem - I got multiple checkboxes as a part of my custom component (TimeButtonCheck) rendered on parent screen. On parent screen there is an array which is filled with - whether the checkboxes are checked or unchecked. But there is a problem happening. If I check/uncheck one of those checkboxes, all of them uncheck because they have same state in parent component. When I split the state into these child components I cant modify array of the parent component from child components. Can someone help me to solve this? Here is my code (child element):

```
    const TimeButtonCheck = props => {
const [ceknute, setCeknute] = useState(true);
const [pole, setPole] = useState(["9:00", "10:00", "11:00"]);

const checkHandler = (id) => {
    setCeknute(!ceknute);
    if(!ceknute) {
        const novePole = pole.slice();
        novePole.push(id);
        console.log("pushuj");
        setPole(novePole);
        console.log(novePole);
    }
    else
    {
        console.log("filtruj");
    }

};
return (
        <View style={styles.customButon}>
        <CheckBox
        checked = {ceknute}
        key = {props.key}
        onPress={(key) => {checkHandler(key)}}
        checkedColor = {Colors.primaryColor}
        containerStyle = {{padding:0,}}
        />

            <TouchableOpacity activeOpacity={0.5}>
                <Text 
                style={styles.textInButton}>
                {props.cas}
                </Text>
            </TouchableOpacity>
        </View>
);

```

And here is my parent component which is mapping those TimeButtonChecks on screen:

```
const JazdyInstruktor = props => {
    const pole = ["8:00", "9:00", "10:00"];
  const selectedStartDate = null;
  const [isLoading, setIsLoading] = useState(true);
  const [displayText, setDisplayText] = useState(true);
  const dataToMap = ["11:00", "12:00", "13:00", "14:00", "15:00"];

 const maper = (data) => {
    return(
      <View style = {{marginHorizontal: 18,}}>
      <View style ={styles.instruktor}>
      <InstruktorBar />
      </View>
      <View style = {styles.screen}>
      {data.map((item) => {
        return ( 
        <TimeButtonCheck
         key = {item}
         cas={item}
         />
   )})}
      </View>
      </View>
    );
  }

  const startDate = selectedStartDate ? selectedStartDate.toString() : '';
  const token = useSelector(state => state.auth.token);

    return(
    <View style={styles.container}>
    <CalendarPicker 
    onDateChange={dateChangeHandler}
    />
    <View>
    {(isLoading) ? ((displayText) ? (<View style={styles.centered}><Text>Pre zobrazenie volnych terminov si vyberte datum</Text></View>) : (<View style = {{paddingTop: 10,
      textAlign: 'center',}}><ActivityIndicator size='large' color={Colors.primaryColor}/></View>)) : **maper(dataToMap)**}
    </View>

    </View>

```

This is the case I can not modify parent array called pole through these child components - I can only modify separate arrays for every child component. Is there any way to solve this? Thank you.