MUI - React does not recognize the `renderInput` prop on a DOM element in Datepicker

Question

I am trying to use the DatePicker component from MUI version 5. I have included it exactly as it is specified in the codesandbox example from the MUI docs. So my component looks like this:

const MonthPicker: FC = () => {
    const [value, setValue] = React.useState<Date | null>(new Date());

    return (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
                views={['year', 'month']}
                label="Year and Month"
                minDate={new Date('2012-03-01')}
                maxDate={new Date('2023-06-01')}
                value={value}
                onChange={(newValue) => {
                if (newValue !== undefined) {
                    setValue(newValue);
                }
                
                }}
                renderInput={(props) => <TextField  {...props} size='small' helperText={null} />}
            />
        </LocalizationProvider>
    )
}

No matter what I tried, I always got the error message: React does not recognize the renderInput prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase renderinput instead.

If I write it in lowercase, then the code doesn't even render. What am I doing wrong here?

Answer 1

This is a bug from MUI, you can see it happens in the official docs too when you open the MonthPicker . It's because they forgot to filter the renderInput callback before passing the rest of the props to the DOM element.

You can see from the source that the YearPicker doesn't have this problem because it passes every props down manually , while the MonthPicker chooses to spread the remaining props which includes renderInput - this is an invalid prop because the HTML attribute doesn't know anything about JS callback object.

This error is just a warning from ReactJS when it thinks you're doing something wrong, but you're not because this is an upstream bug, and it doesn't affect anything else functionality-wise, so ignore it.