MUI Datepicker onChange event working with manual input but not when clicking date

Question

I've been toying around with this for a while to no avail.

When the user inputs a date manually into the text field, that onChange event fires and everything works as I want it to. When the user clicks on a date from from datepicker, nothing at all happens.

I'm still getting used to using MUI fields in Controllers to suit React Hook Form, but I'm not sure what I'm doing incorrectly.

  const { handleSubmit, control, register } = useForm();
  const [selectedDate, setSelectedDate] = React.useState(null);

  const handleDateChange = (date) => {
    console.log(date)
    setSelectedDate(date);
  };

        <form onSubmit={handleSubmit(submitForm)}>       
              <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <Controller
                  control={control}
                  name={"newEffectiveDate"}
                  defaultValue={null}
                  render={() => (
                    <KeyboardDatePicker
                      inputVariant="outlined"
                      disableToolbar
                      format="MM/dd/yyyy"
                      margin="normal"
                      id="date-picker-inline"
                      label="Date picker inline"
                      value={selectedDate}
                      onChange={date => handleDateChange(date)}
                      KeyboardButtonProps={{
                        "aria-label": "change date",
                      }}
                    />
                  )}
                />
              </MuiPickersUtilsProvider>
        </form>

Any help would be much appreciated!

Answer 1

Turns out, I just needed to add the autoOk prop to the KeyboardDatePicker component...