How can i send a backgroundcolor array from one component and send it to css in react native

I have a unique backgroundColor for each item in a data array that is in the cart component. I want to send backgroundColor to the CSS file. How to send it?

Carts.js

import {View,Text,ScrollView,FlatList} from 'react-native';
import styles from './styles';

const DATA = [

{
  id: '1',
  title: 'First Item',
  backgroundColor:"#ffcc66",
},
{
  id: '2',
  title: 'Second Item',
  backgroundColor:"#ffb3b3",
},
{
  id: '3',
  title: 'Theird Item',
  backgroundColor:"#b3d9ff",
}
];
const Item = ({ title,backgroundColor }) => (
<View style={styles.item(DATA.backgroundColora)}>
  <Text style={styles.title}>{title}</Text>
</View>
);

function Carts() {
const renderItem = ({ item }) => {
    <Item title={item.title} />
}
return(
    <View style={styles.container}>
        <FlatList horizontal={true} showsHorizontalScrollIndicator={false}
            data={DATA}
            renderItem={renderItem}
            keyExtractor={item => item.id}
        />
    </View>
  );
 };
 export default Carts;

I want to send backgroundColor from DATA to item(bgColor)

Send data

styles.js

import {StyleSheet} from 'react-native';
import Cart from './Carts';
const styles=StyleSheet.create({

item:(bgColor)=>( {
    margin:8,
    width:300,
    height:200,
    borderRadius:20,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:bgColor
  }),
  title: {
    fontSize: 32,
  },