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 (

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

                                    </View>
                                );
                            }}

...
/>)