如何推送、更新位于react函数组件的对象中的数组中的元素

import React, { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState({
    array: ['element1', 'element2', 'element3']
  });

  const updateArray = () => {
    // 创建新的数组副本
    const newArray = [...data.array];

    // 在新的数组副本上执行推送或更新操作
    newArray.push('newElement'); // 推送新元素到数组末尾
    newArray[1] = 'updatedElement'; // 更新索引为1的元素

    // 更新组件的状态
    setData(prevData => ({
      ...prevData,
      array: newArray
    }));
  };

  return (
    <div>
      <button onClick={updateArray}>更新数组</button>
      <ul>
        {data.array.map((element, index) => (
          <li key={index}>{element}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;