如何在React中更新具有来自对象状态变量数组的值的Textfield？

import React, { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState([
    { id: 1, value: 'Value 1' },
    { id: 2, value: 'Value 2' },
    { id: 3, value: 'Value 3' }
  ]);

  // 其他代码...

  return (
    <div>
      {/* 渲染TextField组件 */}
    </div>
  );
}

export default MyComponent;

return (
  <div>
    {data.map(item => (
      <TextField
        key={item.id}
        value={item.value}
        onChange={event => handleInputChange(event, item.id)}
      />
    ))}
  </div>
);

function handleInputChange(event, id) {
  const updatedData = data.map(item => {
    if (item.id === id) {
      return { ...item, value: event.target.value };
    }
    return item;
  });

  setData(updatedData);
}