如何在reactjs中将项追加到js中的列表

import React, { useState } from 'react';

function ListComponent() {
  const [list, setList] = useState(['Item 1', 'Item 2', 'Item 3']); // 初始列表项

  const handleAddItem = (e) => {
    e.preventDefault();
    const newItem = e.target.item.value; // 获取输入的新列表项
    setList([...list, newItem]); // 将新列表项追加到列表数组中
    e.target.reset(); // 重置表单
  };

  return (
    <div>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <form onSubmit={handleAddItem}>
        <input type="text" name="item" />
        <button type="submit">Add Item</button>
      </form>
    </div>
  );
}

export default ListComponent;