I am trying to toggle a dynamic background color for a button in a nested Flatlist. I am able to change color but it changes all the element in the list.
I want to change the color of the questions based on the color that is provided in the array you can check out the full code in the snack below.
Snack URL - https://snack.expo.io/@jerrypatels/bossy-bagelRun the snack into phone to get more clarity 
JSON data for Loops
[ { title: 'Q1', data: [ { Q: 'Question 1', length: 2, width: 38, options: [ {id: 1, value: 'Yes', color: '#40AB35'}, {id: 2, value: 'No', color: '#C6280F'}, ], }, { Q:'Question 2', length: 3, width: 30, options: [ {id: 1, value: 'Yes', color: '#40AB35'}, {id: 2, value: 'No', color: '#C6280F'}, {id: 3, value: 'NA', color: '#808289'}, ], }, { Q:'Question 3', length: 2, width: 38, options: [ {id: 1, value: 'Yes', color: '#40AB35'}, {id: 2, value: 'No', color: '#C6280F'}, ], }, ], },]React native code for displaying to front end
<FlatList data={Alongside} keyExtractor={(item, index) => ''+ index} renderItem={({item}) => (<><View style={styles.buttonContainer}><View style={{ borderRadius: 2, borderBottomWidth: 1, }}><TouchableOpacity style={styles.qtitle} onPress={() => GetStores()}><Text style={[styles.title, {width: width - 80}]}> {item.title}</Text></TouchableOpacity></View><FlatList data={item.data} keyExtractor={(item, index) => '2'+ index} renderItem={({item, index}: any) => (<View style={{padding: 10}}><Text style={[styles.text, {padding: 10}]}> {item.Q}</Text><View style={styles.btnP}> {item.options.map((list: any, ind: any) => { return (<TouchableOpacity style={[ styles.btn2, { width: width / item.length - item.width, backgroundColor: checked === list.id //Condition for changing bg color ? list.color : '#F4F6FC', }, ]} onPress={() => { // setChecked(list.id); }}><Text style={[ Style.normalText, {textAlign: 'center'}, ]}> {list.value}</Text></TouchableOpacity> ); })}</View></View> )} />