如何更新useState钩子中对象数组中的值

const [data, setData] = useState([
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
]);

const index = data.findIndex(item => item.id === 2);

const newData = [...data];
newData[index] = { ...newData[index], name: 'Updated Name' };

setData(newData);

import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
  ]);

  const updateName = () => {
    const index = data.findIndex(item => item.id === 2);
    const newData = [...data];
    newData[index] = { ...newData[index], name: 'Updated Name' };
    setData(newData);
  };

  return (
    <div>
      <button onClick={updateName}>Update Name</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;