Estoy tratando de crear un formulario usando grupos de entradas de radio que guardan sus valores en un solo objeto de estado.

El problema que tengo con el siguiente código es que el estado se está actualizando correctamente, pero los atributos de verificación de radio y las dos etiquetas de párrafo no se vuelven a representar para mostrar el nuevo texto. Si vuelvo a representar el componente con algún otro método, el texto se actualiza para coincidir con el estado.

Sé que en un mundo ideal tendría un useState() para cada grupo de radio, sin embargo, los datos que se usan para generar el formulario son dinámicos desde un servidor, por lo que no puedo predecir cómo se verá la forma del estado y yo necesita enviar la entrada como un objeto al servidor. He simplificado mi ejemplo, pero el problema es el mismo...

 import { useState } from 'react' const Form = () => { const [ data, setData ] = useState({}); const handleChange = (key, value) => { data[key] = value setData(data) } return ( <div> <h2>Form</h2> <p>Gender: { data.gender }</p> <p>Age: { data.age }</p> <form action=""> <label> Male <input type="radio" name="gender" checked={data['gender'] === 'male'} onChange={() => handleChange('gender', 'male')} /> </label> <label> Female <input type="radio" name="gender" checked={data['gender'] === 'female'} onChange={() => handleChange('gender', 'female')} /> </label> <label> Old <input type="radio" name="age" checked={data['age'] === 'old'} onChange={() => handleChange('age', 'old')} /> </label> <label> Young <input type="radio" name="age" checked={data['age'] === 'young'} onChange={() => handleChange('age', 'young')} /> </label> </form> </div> ); } export default Form;

Todavía soy relativamente nuevo para reaccionar, por lo que cualquier ayuda sería muy apreciada, ¡estoy seguro de que es algo bastante obvio que me estoy perdiendo!