如何编辑对象并将新的对象传递给数组？ReactJS，材质UI

import React, { useState } from 'react';

const ExampleComponent = () => {
  const [data, setData] = useState([
    { id: 1, name: 'Object 1' },
    { id: 2, name: 'Object 2' },
    { id: 3, name: 'Object 3' }
  ]);

  const editObject = (id, newName) => {
    const updatedData = data.map(obj => {
      if (obj.id === id) {
        // 编辑对象的属性
        return { ...obj, name: newName };
      }
      return obj;
    });

    // 更新组件的状态
    setData(updatedData);
  };

  return (
    <div>
      {data.map(obj => (
        <div key={obj.id}>
          {obj.name}
          <button onClick={() => editObject(obj.id, 'New Name')}>
            Edit Object
          </button>
        </div>
      ))}
    </div>
  );
};

export default ExampleComponent;