如何隐藏react列表中的特定元素？

import React, { useState } from 'react';

const List = () => {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', visible: true },
    { id: 2, name: 'Item 2', visible: true },
    { id: 3, name: 'Item 3', visible: false },
    { id: 4, name: 'Item 4', visible: true },
  ]);

  const hideItem = (id) => {
    setItems(items.map(item => {
      if (item.id === id) {
        return { ...item, visible: false };
      }
      return item;
    }));
  };

  return (
    <ul>
      {items.map(item => (
        item.visible && (
          <li key={item.id}>
            {item.name}
            <button onClick={() => hideItem(item.id)}>Hide</button>
          </li>
        )
      ))}
    </ul>
  );
};

export default List;