如何更改从数组动态创建的TouchableOpacity的backgroundColor？

const data = [
  { id: 1, backgroundColor: 'red' },
  { id: 2, backgroundColor: 'blue' },
  { id: 3, backgroundColor: 'green' },
];

import React from 'react';
import { TouchableOpacity, StyleSheet, View } from 'react-native';

const MyComponent = () => {
  return (
    <View>
      {data.map(item => (
        <TouchableOpacity
          key={item.id}
          style={[styles.button, { backgroundColor: item.backgroundColor }]}
        >
          {/* TouchableOpacity的内容 */}
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  button: {
    width: 100,
    height: 50,
    borderRadius: 5,
    marginVertical: 10,
  },
});

export default MyComponent;