TextField not editable due to Uncaught TypeError: is not iterable

Question

I am pulling data from an API and appending it to TextFields where it is displayed. I need to be able to edit the data displayed in TextFields, but I a get this Uncaught TypeError: prev.fields is not iterable when I try to edit or add any text to the TextFields.

This is how the TextField is populated:

{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"]}
                />
            );
        })}
    );
})}

This is my API request:

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

This is an example of my data:

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

Answer 1

This answer was provided by Chris G in his comment