Extraigo datos de una API y los agrego a TextFields donde se muestran. Necesito poder editar los datos que se muestran en TextFields, pero obtengo este Uncaught TypeError: prev.fields is not iterable cuando intento editar o agregar texto a TextFields.

Así es como se llena el TextField:

 {details["groups"]?.map((group) => { return ( {group["fields"]?.map((row, index) => { return ( <TextField value={row?.Value || ""} onChange={(e) => { setDetails((prev) => { const update = [...prev.fields]; update[index] = { ...update[index], Value: e.target.value, }; return { ...prev, fields: update }; }); }} label={row["FieldName"]} /> ); })} ); })}

Esta es mi solicitud de API:

 const fetchDetails = async () => { setDetails(await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details`) .then((response) => response.json())); };

Este es un ejemplo de mis datos:

 { "groups": [ "GroupName": "Solution Details", "GroupOrder": 1, "fields": [ { "FieldId": 19, "FieldOrder": 1, "FieldName": "Requesting Organization", "FieldType": "Text", "Value": "IT", "Choices": [ null ] } ] ] }