Cannot change state of one item across multiple inputs in a form component

I have a form that takes a couple of inputs. To store their states I created an object which works fine for all inputs except the date one.

// Input handler
const [values, setValues] = React.useState({
    applicant: '',
    position: '',
    startSalary: '',
    date: null,
    months: 0,
    increase: 0,
    interval: "",
    method: "",
});

const handleChange = (prop) => (event) => {
    setValues({ ...values, [prop]: event.target.value });
    console.log(values)
};


..

{/* Months Period */}
<div className="flex">
    <div className="input-wrapper flex justify-between w-full items-center">
        <FormControl sx={{ width: '95%', marginRight: '20px' }}>
          <InputLabel htmlFor="outlined-adornment-amount">Months</InputLabel>
          <OutlinedInput
            id="outlined-adornment-amount"
            value={values.months}
            onChange={handleChange('months')}
            startAdornment={<InputAdornment position="start">n</InputAdornment>}
            label="Months"
            type="number"
          />
        </FormControl>
    </div>
</div>

{/* Date Picker */}
<div className="input-wrapper flex justify-between items-center">
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DatePicker
        label="Start Date"
        value={values.date}
        onChange={handleChange('date')}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
</div>
..

When I change the date on the client side it returns

However, this works isolated for the datepicker:

...
const [value, setValue] = React.useState(null);

<div className="input-wrapper flex justify-between items-center">
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DatePicker
        label="Start Date"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
</div>
...

>Solution :

By seeing above code, seems like DatePicker isn’t returning you an event object.

Simply check, by doing a console.log in your handleChange method.
Also,you can add if checks to manage such cases.

const handleChange = (prop) => (event) => {
    console.log(event);
    if(prop === 'date') {   
      setValues({ ...values, [prop]: event});
    } else {
       setValues({ ...values, [prop]: event.target.value });
    }
    console.log(values)
};