Unable to edit MUI TextFields after populating from API

Question

I am trying to allow MUI TextFields to be editable after populating them from an API.

The TextFields are successfully populating.

I have tried using an onChange method which allowed only one extra character to be entered into the TextField before immediately being overwritten with the original data.

Here is my API call:

const params = useParams();
const [details, setDetails] = useState('');

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

The Function:

function IntakeDetails() {
    const params = useParams();
    const [details, setDetails] = useState('');

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

    useEffect(() => {
        fetchDetails();
    }, []);

    return (
        <Container maxWidth="xl">
            <Box>
                <h3> Intake Details </h3>
            </Box>
            <Box className="details-form">
                {details['fields']?.map((row) => (
                    <TextField
                        className="text-field"
                        value={row['Value'] || ''}
                        onChange={(e) => {
                            setDetails((prev) => {
                                return { ...prev, row: e.target.value };
                            });
                        }}
                        variant="outlined"
                        margin="normal"
                        label={row['FieldName']}
                    />
                ))}
            </Box>
        </Container>
    );
}

The JSON response from the API looks like this:

{
  "Id": 1,
  "IntakeID": 1234,
  "Title": "title",
  "Status": "Cancelled",
  "TaxonomyID": null,
  "ModifiedBy": "Doe, Jane",
  "UpdateDate": "Jan  9 2020 12:00AM",
  "questions": "google.com",
  "actions": "google.com",
  "sizing": "google.com",
  "fields": [
    {
      "FieldId": 2,
      "FieldName": "Type",
      "FieldType": "Select",
      "Value": "Sandbox",
      "Choices": [
        "Option1",
        "Option2",
        "Option3",
        "Option4",
        "Option5"
      ]
    },
    {
      "FieldId": 3,
      "FieldName": "Class",
      "FieldType": "Select",
      "Value": "Run",
      "Choices": [
        "Option1",
        "Option2",
        "Option3",
        "Option4",
        "Option5",
        "Option6",
        "Option7"
      ]
    }
}

Answer 1

This answer was provided by Mujeeb Qureshi in a comment on this question.

My previous attempts at an onChange only allowed for one character to be added to the text field before being overwritten by the original data.

The method provided by Mujeeb Qureshi below allows data in the TextField to be changed freely.

onChange={(e) => { setDetails((prev) => { return { ...prev, IntakeID: e.target.value }; }); }}