I have a DatePicker which is throwing the following error message: Uncaught TypeError: Cannot read properties of undefined (reading 'value').

My data is being pulled from an API where some items date field is null. Initial render of the page is fine, where the TextFields and 2 empty date pickers display, but when I input a date, the error is thrown.

When an item does have a date value, it is returned from the API like this Aug 12 2020 12:00AM

I want to disregard the time and append the date to the date picker when the there is a date present. If there is no date, I want to append todays date.

The following code will display a TextField or a DatePicker based on the value of FieldType.

Here is my API request:

const [details, setDetails] = useState("");

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

This is how I switch between TextFields, Selects and the DatePicker:

return (
<Box>
    {details["fields"]?.map((row, index) => {
    if (row?.FieldType === "Text" || row?.FieldType === "Decimal" || row?.FieldType === "Number") {
        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 };            
                    });
                }}
            />
        );
    }
    if (row?.FieldType === "Date") {        
        return (
            <LocalizationProvider dateAdapter={AdapterDateFns}>
                <DatePicker
                    label={row?.FieldName || ""}
                    renderInput={(params) => <TextField {...params} />}
                    value={row?.Value || ""}
                    onChange={(e) => {
                        setDetails((prev) => {
                            const update = [...prev.fields];
                            update[index] = {
                                ...update[index],
                                Value: e.target.value,
                            };
                            return { ...prev, fields: update };
                        });
                    }}
                />
            </LocalizationProvider>
        );
    } 
    })}
</Box>
)