How can I keep label not closed in MUI 5 datepicker?

Question

Is there a way to keep Material 5 Datepicker to not close if there's a label but no value?

Currently: Currently

What I try to get: Expected

Code:

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

I tried to make an own <Box> label above <DatePicker> with styling but I was wondering if there is a cleaner option.

Answer 1

Use InputLabelProps={{ shrink: true }} prop on your TextField component like this:

<DatePicker
  label="Basic example"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(params) => <TextField {...params} InputLabelProps={{ shrink: true }} />}
/>