Display different fetch data on mouse click

Question

I'm fetching 3 objects using json-server, and they are rendered as cards.I would like them to be displayed in an input as a placeholder, but only when one gets clicked. Right now, it display just the first. I would like that gets displayed, the one that I click to.

  const [realName, setRealName] = useState("");
  const [playerName, setPlayerName] = useState("");
  const [asset, setAsset] = useState("");
  const [players, setPlayers] = useState([]);
  const [order, setOrder] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (realName && playerName && asset) {
      fetch("http://localhost:8000/cards", {
        method: "POST",
        headers: { "Content-type": "application/json" },
        body: JSON.stringify({ realName, playerName, asset }),
      });
    }
  };

  useEffect(() => {
    fetch(`http://localhost:8000/cards?_sort=realName&_order=${order}`)
      .then((res) => res.json())
      .then((data) => setPlayers(data));
  }, [order]);

This is the form:

<form className="details-cnt" onSubmit={handleSubmit}>
     <legend>Details</legend>
     <label htmlFor="real_name">Real Name</label>
     <input
       onChange={(e) => setRealName(e.target.value)}
       required
       placeholder={players[0].realName}
       type="text"
       name="real_name"
       id="real_name"
     />
     <label htmlFor="player_name">Player Name</label>
     <input
       onChange={(e) => setPlayerName(e.target.value)}
       placeholder={players[0].playerName}
       required
       type="text"
       name="player_name"
       id="player_name"
     />
     <label htmlFor="asset">Asset</label>
     <input
       onChange={(e) => setAsset(e.target.value)}
       placeholder={players[0].asset}
       required
       type="text"
       name="asset"
       id="asset"
     />
     <button type="submit">Submit</button>
   </form>

How can I do? Thanks in advance