'React datePicker (NextJs)

I want to work with datePicker in reactJS(Next JS) all works normally but when I'm switching my browser to responsive, the icon disappears. who can help me solve this issue

here is my code

import TextField from '@mui/material/TextField'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import LocalizationProvider from '@mui/lab/LocalizationProvider'
import DatePicker from '@mui/lab/DatePicker'
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
import StaticDatePicker from '@mui/lab/DatePicker'
const [value, setValue] = useState(null)

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDatePicker
    displayStaticWrapperAs="desktop"
    label="Week picker"
    value={value}
    onChange={(newValue) => {
      setValue(newValue)
    }}
    renderInput={(params) => <TextField {...params} />}
    inputFormat="'Week of' MMM d"
  />
</LocalizationProvider>

enter image description here



Solution 1:[1]

According to the docs there are two versions of the component and the mobile one does not have an icon https://mui.com/components/date-picker/#responsiveness, you can test it there and the responsive one changes

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Luiz Avila