如何在React中改变一个对象集合的css样式？

import React from 'react';

const ObjectCollection = ({ objects }) => {
  return (
    <div>
      {objects.map((object, index) => (
        <div key={index} style={object.style}>
          {object.name}
        </div>
      ))}
    </div>
  );
};

export default ObjectCollection;

import React, { useState } from 'react';
import ObjectCollection from './ObjectCollection';

const ParentComponent = () => {
  const [objects, setObjects] = useState([
    { name: 'Object 1', style: { color: 'red' } },
    { name: 'Object 2', style: { color: 'blue' } },
    { name: 'Object 3', style: { color: 'green' } },
  ]);

  const changeStyle = () => {
    const updatedObjects = objects.map((object) => ({
      ...object,
      style: { ...object.style, backgroundColor: 'yellow' },
    }));
    setObjects(updatedObjects);
  };

  return (
    <div>
      <button onClick={changeStyle}>Change Style</button>
      <ObjectCollection objects={objects} />
    </div>
  );
};

export default ParentComponent;