如何使用React挂钩将按钮单击到列表数组项中仅影响相关项

import React, { useState } from 'react';

function ListComponent() {
  const [listItems, setListItems] = useState([
    { id: 1, name: 'Item 1', active: false },
    { id: 2, name: 'Item 2', active: false },
    { id: 3, name: 'Item 3', active: false }
  ]);

  const handleClick = (id) => {
    setListItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, active: !item.active } : item
      )
    );
  };

  return (
    <div>
      <ul>
        {listItems.map((item) => (
          <li key={item.id}>
            {item.name}{' '}
            <button onClick={() => handleClick(item.id)}>
              {item.active ? 'Active' : 'Inactive'}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ListComponent;