如何使用react函数钩子仅钩住被单击以打开的卡片，并将先前单击的卡片重置为返回关闭状态

import React, { useState } from 'react';

function CardList() {
  const [selectedCard, setSelectedCard] = useState(null);

  const handleCardClick = (cardId) => {
    if (selectedCard === cardId) {
      setSelectedCard(null); // 如果点击的是已经打开的卡片，则重置为关闭状态
    } else {
      setSelectedCard(cardId); // 否则，设置选中的卡片为被点击的卡片
    }
  };

  return (
    <div>
      {cards.map((card) => (
        <Card
          key={card.id}
          card={card}
          isSelected={selectedCard === card.id}
          onClick={handleCardClick}
        />
      ))}
    </div>
  );
}

function Card({ card, isSelected, onClick }) {
  return (
    <div
      className={`card ${isSelected ? 'selected' : ''}`}
      onClick={() => onClick(card.id)}
    >
      <h3>{card.title}</h3>
      <p>{card.description}</p>
    </div>
  );
}

const cards = [
  { id: 1, title: 'Card 1', description: 'This is card 1' },
  { id: 2, title: 'Card 2', description: 'This is card 2' },
  { id: 3, title: 'Card 3', description: 'This is card 3' },
];

function App() {
  return <CardList cards={cards} />;
}