Estoy controlando un botón de radio en un formulario de reacción.

El estado se actualiza con el cambio como se esperaba, pero el valor checked no se vuelve a representar con el cambio. Por lo tanto, desde la perspectiva del usuario, el botón no funciona.

He replicado esto en un codesandbox aquí https://codesandbox.io/s/eager-hertz-stzgk?file=/src/App.js

Código relevante:

 const [selectedRole, setSelectedRole] = useState("staff"); ... const handleRoleChange = (event) => { event.preventDefault(); setSelectedRole(event.target.value); }; ... <form> <label> Staff <input type="radio" name="role" value="staff" checked={selectedRole === "staff"} onChange={handleRoleChange} /> </label> <label> Student <input type="radio" name="role" value="student" checked={selectedRole === "student"} onChange={handleRoleChange} /> </label> </form>

Agradezco cualquier ayuda ya que estoy sin ideas.

Gracias