React Hooks selecting data to a date picker - reactjs

Question

I have a MUI date picker in my React app that I want to use with serverside data.
I'm returning the correct data in my console log that I pass in my useState hook const [availableDate, setAvailableDate] = useState({}); and now want to pass the selected date into the picker:
returned JSON
const data = [
{
date: '05/05/21',
timeSlots: [
{
end: '11:00',
start: '12:00'
}
]
},
{
date: '05/05/24',
timeSlots: [
{
end: '13:00',
start: '14:00'
}
]
}
];
Date Picker
const [availableDate, setAvailableDate] = useState({});
const [filteredData, setFilteredData] = useState(availableDate);
//set current date as default
var curr = new Date();
function setDate(dat) {
let datt = {
date: {// ... returend date},
start: '11:40',
end: '13:00',
};
service.stepDate.setCvData(datt);
}
curr.setDate(curr.getDate());
var date = curr.toISOString().substr(0, 10);
Date Picker
I tried mapping the array data in my date picker but this just returns multiple pickers.
{availableDates.map((index) => (
<div className="calendarWrapper">
<form noValidate>
<TextField
key={index.id}
minDate={today}
id="date"
type="date"
onChange={setDate}
defaultValue={date}
/>
</form>
</div>
))}
How do I extract the selected date ex: date: "2021/05/24" from the json and pass it into my setDate() function?

Answer 1

First of all, onChange interface is the following
onChange(e) {
// e.target.value
}
so you won't be able to get your date from e directly.
Also date is an object, which can't be {} initially, null could be one option, or new Date().