I have a form which containts material ui KeyboardDatePicker . As a default value of KeyboardDatePicker I want to use start_date from the next json object:
title: "new"
start_date: "2022-01-15T14:25:30Z"
author: 1
end_date: "2022-01-15T14:25:31Z"
id: 1
reg_end_date: "2022-01-15T14:25:36Z"
reg_start_date: "2022-01-15T14:25:33Z"
status: 2
here is my implementation:
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
axiosInstance.put(`admin/edit/` + id + '/', {
title: formData.title,
slug: formData.slug,
author: 1,
description: formData.description,
start_date:formData.start_date
});
history.push({
pathname: '/admin/',
});
window.location.reload();
};
const classes = useStyles();
const [selectedDate, setSelectedDate] = useState(new Date(formData.start_date));
const handleDateChange = (date) => {
console.log(date);
setSelectedDate(date);
};
return (
<Container component="main" maxWidth="sm">
<CssBaseline />
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Edit
</Typography>
<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
label="Material Date Picker"
value={selectedDate}
onChange={handleDateChange}/>
</MuiPickersUtilsProvider>
</Grid>
</form>
</div>
</Container>
);
but if I hardcode start_date, everything works fine:
const [selectedDate, setSelectedDate] = useState(new Date("2022-01-15T14:25:30Z"));
What is the problem and how I can solve it? Thank you

