How to style every item differently in my dropdown?

[ainnotate]

I want to give a different background for every list item. I'm trying the following,

  const data = [
    { label: 'Item 1', value: '1' , itemContainerStyle: { backgroundColor: '#f6ede4'}, itemTextStyle: {color: '#fff'}},
    { label: 'Item 2', value: '2' , itemContainerStyle: { backgroundColor: '#a07e56'}, itemTextStyle: {color: '#fff'}},
    { label: 'Item 3', value: '3' , itemContainerStyle: { backgroundColor: '#3a312a'}, itemTextStyle: {color: '#fff'}},
  ];

<Dropdown 
  data={data}
  labelField="label"
  valueField="value"
  ...
  />

Please let me know if I'm doing something wrong. Thank you.

[mohammed0abbas]

const data = [ { label: 'Item 1', value: '1' , backgroundColor: '#f6ede4', color: '#fff'}, { label: 'Item 2', value: '2' , backgroundColor: '#a07e56', color: '#fff'}, { label: 'Item 3', value: '3' , backgroundColor: '#3a312a', color: '#fff'}, ];

return (<Dropdown data={data} labelField="label" valueField="value" renderItem={(item) => { return ( <View>

                                        <Text style={{
                                            flex: 1,
                                            fontSize: 16,
                                             backgroundColor : item.backgroundColor,
                                             color : item.color
                                        }}>{item.label}</Text>

                                    </View>
                                );
                            }}

... />)