I'm using MUI datepicker here and when I use this before entering any value I see red border after selecting the date it disappears.

Here is the issue

 const [selectDate, setSelectDate] = useState("");

  const handleDate = (newValue) => {
    setSelectDate(newValue);
  };
      
 <LocalizationProvider dateAdapter={AdapterDayjs}>
                  <DesktopDatePicker
                    // label="Date desktop"

                    inputFormat="DD/MM/YYYY"
                    value={selectDate}
                    onChange={handleDate}
                    renderInput={(params) => (
                      <TextField  error={false} fullWidth {...params}  />
                    )}
                  />
                </LocalizationProvider>

Here I tried giving error false but it does not dissappear anyone have gone through this issue if yes then how can i fix it..

CodePudding user response：

The params in renderInput prop override your definition of the TextFields' error prop because the {...params} prop is defined after it (there is an additional error prop inside the params bundle).

If you define the error prop after, you will override the renderInputs' error prop and the red line will disappear.

<TextField fullWidth {...params} error={false} />

By default the parameter props passed by the renderInput consider an error if no date value is selected, value is empty, or the date format for value is wrong.