Tengo un DatePicker que arroja el siguiente mensaje de error: Uncaught TypeError: Cannot read properties of undefined (reading 'value') .

Mis datos se extraen de una API donde el campo de fecha de algunos elementos es nulo. La representación inicial de la página está bien, donde se muestran los campos de texto y 2 selectores de fecha vacíos, pero cuando ingreso una fecha, aparece el error.

Cuando un elemento tiene un valor de fecha, la API lo devuelve así Aug 12 2020 12:00AM a. m.

Quiero ignorar la hora y agregar la fecha al selector de fecha cuando hay una fecha presente. Si no hay fecha, quiero agregar la fecha de hoy.

El siguiente código mostrará un TextField o un DatePicker basado en el valor de FieldType .

Aquí está mi solicitud de API:

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

Así es como cambio entre TextFields, Selects y 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> )