change Icon after clicking on it

I have a component that looks like this:

const criteriaList = ['Nur Frauen','Freunde Zweiten Grades',];export const FilterCriteriaList: React.FunctionComponent = () => {  const [state, setState] = useState(false);  useEffect(() => {    console.log('state is,', state);  });  const myFunction = () => {    console.log('checking state', state);    if (state == false) {      setState(true);    } else {      setState(false);    }  };  return (<View style={styles.container}><View style={styles.horizontalLine} />      {criteriaList.map((item: string, index: number) => (<View key={index}><View style={styles.criteriaRow}><TouchableOpacity               onPress={() => {                myFunction();              }}><Icon                name="circle-thin"                color="#31C283"                size={moderateScale(20)}              /></TouchableOpacity><Text style={styles.text}>{item}</Text></View><View style={styles.horizontalLine} /></View>      ))}</View>  );};

Currently, I am using the circle-thin icon. I want to change it such that everytime I click on an icon, it changes to the dot-circle-o icon. Like radio buttons. However, I am not quite sure how to do so.

I thought of using ternary operators but since I am mapping my fields Idk how to setStates collectively. Maybe using the index? I don't want to make a separate state for each field. Here's a similar snack demo:

https://snack.expo.io/toTSYc2fD

I want to be able to select multiple/unselect options. I don't want to apply the same rule on all fields together.

Note: the onPress function can also be used on the Icon directly instead of the TouchableOpacity (though it is not preferred)