Estoy tratando de crear una aplicación de reacción simple que muestre la entrada de radio para cada 'héroe' de una lista de héroes y, si el usuario verifica, el nombre del héroe se mostrará como el héroe favorito. Pero el problema está en mi máquina local para verificar un héroe. Necesito hacer doble clic en esa entrada de radio. ¿Cómo puedo comprobar un héroe con un solo clic? El código del archivo app.js se proporciona a continuación:

 import React, { useState } from "react"; import "./App.css"; function App() { const [heros, setHeros] = useState([ "Superman", "Batman", "Antman", "Robocop", ]); const [selected, setSelected] = useState(null); const handleChange = (e) => { e.preventDefault(); setSelected(e.target.value); console.log(e.target.checked); }; return ( <div> <h1>Select Your Favorite Hero</h1> <form onChange={handleChange}> {heros.map((hero, index) => ( <div key={index}> <input type="radio" name="hero" id={hero} value={hero} /> <label htmlFor="{hero}">{hero}</label> <br /> </div> ))} </form> <div> <p>Your super hero is: {selected}</p> </div> </div> ); } export default App;