react native : What is the way to populate the EmergencyRolePicker picker in data with a map function rather than hardcoded?

What is the way to populate the EmergencyRolePicker picker in data with a map function rather than hardcoded?In my example I am trying to populate the picker but I want to do it with a map loop so I can select something from the picker.The picker comes from the react-native-paper library.I would be happy for some help with this issue.

this is my code:

import { List } from 'react-native-paper';export const ActionsScreen = () => {  const [roleList, setRoleList] = useState([]);  useEffect(() => {    (async () => {      try {        // State table        const emcStateList: EmergencyStateType[] = await EmergencyStateTable.getEmergencyStateList();        console.log('emcStateList:', emcStateList.length);        let items = [];        emcStateList.forEach(function (item, i) {          items.push({ label: item.EmergencyName, value: item.EmergencyCode, key: i });        })        setStateList(items);        // Role table        const emcRoleList: EmergencyRoleType[] = await EmergencyRoleTable.getEmergencyRoleList();        console.log('emcRoleList:', emcRoleList.length);        items = [];        emcRoleList.forEach(function (item, i) {          items.push({ label: item.RoleName, value: item.RoleCode, key: i });        })        setRoleList(items);        //      } catch (error) {        console.log('A problem getting emergency list from db:', error);      }    })();  }, []);  const EmergencyRolePicker = () => {    return (<List.Accordion title={roleList[0].label} id="0"><List.Item title={roleList[1].label} /><List.Item title={roleList[2].label} />       </List.Accordion>    )  }  return (<><SafeAreaView style={styles.container}><ScrollView style={styles.scrollView}><View style={styles.text}><Text style={styles.label}>{MenuStrings.EmergencyRole}</Text><View style={styles.pickerView}><EmergencyRolePicker /></View></View></ScrollView></SafeAreaView><View style={styles.BottomViewArea}><TouchableOpacity          style={{ alignSelf: 'flex-start', marginLeft: 60 }}          onPress={() => {          }}><Ionicons            name="send-sharp"            size={30}            color="white"          /></TouchableOpacity></View></>  );}

this is the data:

[   {"key":0,"label":"red","value":1   },   {"key":1,"label":"green","value":2   },   {"key":2,"label":"yellow","value":3   }]