React - Map through array of objects to create Date TextFields in Material UI

I've got an array of objects that denote different steps in a certain process, where each step has an id and name. The array of objects looks something like this:

const steps = [  {    id: 1,    name: start  },  {    id: 2,    name: middle  },  {    id: 3,    name: end  }]

In one of my files, I am mapping through this array of objects to create a TextField of type date with Material UI. This looks like:

{  {steps.map((step, index) => {    return (<TextField        id={step.id}        label={step.name}        type={"date"}        value={step.name}      />    )  })}}

My question is now two-fold:

1. What is the best way to create a state for each of the steps so that I can create an onChange event in the TextField component and store each of the dates in their respective states?

Right now, I've declared the state to pretty much mimic the array of objects, although, I'm not sure this is the best way because it can sort of get out of hand the more steps are added:

const [stepDates, setStepDates] = useState({  start: null,  middle: null,  end: null})

2. If I do declare the states to be as above, how do I actually set the value of each state in the onChange event?

I've done it like this so far:

<TextField  id={step.id}  label={step.name}  type={"date"}  value={step.name}  onChange={event => {    const val = event.target.value    setStepDates(prevState => {      return { ...prevState, step.start: val }     })  }/>

However, with the above, I get an error around step.start saying:

Parsing error: ',' expected