Estoy creando algunos campos de entrada dinámicamente en reacción, pero una vez que actualizo el valor, no se actualiza en el campo de entrada y muestra el valor anterior.

 const Content = input => { const [inputList, setInputList] = useState({}); // it is initialized in other function with some dynamic keys: const getFiltersValues = filters => { let data = {}; for (let i = 0; i < filters.length; i++) { data[filters[i]] = []; } // ... some other processing which stores the data in data object against each key let list = {}; for (const [key, values] of Object.entries(data)) { list[`${key}a`] = 0; list[`${key}b`] = 0; // key is something like 'data size' } setInputList(list); }; // setting up value like this: const handleChange = (e, field) => { const list = inputList; list[`${field}a`] = parseInt(e.target.value); setInputList(list); }; // rendering input fields: return ( <> {filters && filters.length > 0 && ( <div> {filters.map(f => { return ( <div> // correct updated value is shown on the console but its not updated in the 'value' attribute {console.log(inputList[`${f.value}a`])} <input value={inputList[`${f.value}a`] || 0} type="number" onChange={e => handleChange(e, f.value)} /> </div> </div> ); })} </div> )} </> ); };

¿Alguna sugerencia / sugerencia de dónde me estoy equivocando? Gracias.