underline the clicked text element

I have a list of text elements that I want to underline when clicked. If I add the text decoration to the tabText then obviously it is applied to all items. How can I make sure that the when I click on another tab, the underline from the previous tab gets removed?

Is there any way I can add or remove items from the style element upon clicking on an item?

//onPress={() => {}}>const tabs = [  {    id: 1,    text: 'Alle List',  },  {    id: 2,    text: 'Second',  },];export const Tab: React.FunctionComponent = () => {  return (<View style={styles.tabView}>      {tabs.map((item: any) => (<View><Text style={styles.tabText}>{item.text}</Text></View>      ))}</View>  );};const styles = StyleSheet.create({  tabView: {    paddingTop: moderateScale(15),    paddingLeft: moderateScale(20),    paddingRight: moderateScale(20),    flexDirection: 'row',    justifyContent: 'space-between',  },  tabText: {    color: 'white',    paddingBottom: moderateScale(10),    //textDecorationLine: 'underline'  },});

Codesandbox (with tabText items as an array too):

https://snack.expo.io/@nhammad/shallow-watermelon