reset settings of one component from another

I have a screen where I am using some text and another component called FilterCriteriaList which has some custom buttons that change their color when we click on them.

On my main screen, I want to press on the text and reset the settings in the FilterCriteriaList component. This could be done by setting all options[index].checked to false. However, I cannot figure out how to do so such that we can select the buttons again as well.

type FilterCriteriaListProps = {  deleteAll: boolean;};type CriteriaList = {  title: string;  checked: boolean;};const criteriaList = [  { title: 'Nur Frauen', checked: false },  { title: 'Freunde Zweiten Grades', checked: false },  { title: 'Nichtraucherfahrzeug', checked: false },  { title: 'Mit min. 4 Sternen bewertet', checked: false },  { title: 'Automatische Zusage', checked: false },];export const FilterCriteriaList: React.FunctionComponent = () => {  const [selected, setSelected] = useState(criteriaList);  const handleChange = (index: number) => {    const options = [...selected];    options[index].checked = options[index].checked ? false : true;    setSelected(options);  };  return (<View style={styles.container}><View style={styles.horizontalLine} />      {criteriaList.map((item: CriteriaList, index: number) => (<View key={index}><View style={styles.criteriaRow}><Icon              name={item.checked ? 'dot-circle-o' : 'circle-thin'}              color="#31C283"              size={moderateScale(20)}              onPress={() => handleChange(index)}            /><Text style={styles.text}>{item.title}</Text></View><View style={styles.horizontalLine} /></View>      ))}</View>  );};

On main screen:

  const [deleteAll, setDeleteAll] = useState(false);  const deleteAllFilters = () => {    setDeleteAll(true);  };<Text style={styles.deleteAllText} onPress={()=>{deleteAllFilters}}>DELETE ALL</Text>...<FilterCriteriaList/>

Snack Expo:https://snack.expo.io/dh3fk53zf