Build a Race-Free Memory Card Game in React

Implement the interaction logic for a React memory-card game. Every card has a stable ID and a match value; exactly two cards share each value. Cards begin face down. A click reveals an eligible card. After two different cards are revealed, matching cards remain face up, while a nonmatching pair becomes face down after a short delay.

Users may click quickly. Prevent a third card from entering the comparison, ignore clicks on an already revealed or matched card, and ensure a pending mismatch timer cannot corrupt a restarted game or a later turn.

Constraints & Assumptions

• The card list is supplied as props and can be reshuffled when the user restarts.
• Card IDs are unique even when values match.
• The UI should expose the board state accessibly, not by color alone.
• You do not need to implement visual artwork or a backend.

Clarifying Questions to Ask

• Should interaction lock immediately after the second reveal or only during mismatch delay?
• What should happen when props change while a timeout is pending?
• How are moves and game completion counted?
• Is keyboard interaction required in addition to pointer input?