React MUI DateRangePicker with endAdornment, disapapears on first Input in mobile view

Question

We want to use the the DateRangePicker with the added design feature of having the calendar icon as endadornment.

As the title says, I run into the problem that the endadornment disappears when in mobile view (emulated in browser). Looking into the DOM I can see that there is in fact no elements for the endadornment. Added curiousity is that the endAdornment does appear when I activate the inspect element tool.

Mockup https://stackblitz.com/edit/github-t5rrh1?file=src%2Findex.tsx

Sample code:

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import { InputAdornment, IconButton, Tooltip } from '@mui/material';
import { DateRangePicker } from '@mui/x-date-pickers-pro';
import EventIcon from '@mui/icons-material/Event';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';

ReactDOM.createRoot(document.querySelector('#root')!).render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateRangePicker
          slotProps={{
            textField: {
              sx: { minWidth: 150, maxWidth: 170 },
              InputProps: {
                endAdornment: (
                  <InputAdornment position="end">
                    <Tooltip title={'Select date'}>
                      <IconButton>
                        <EventIcon />
                      </IconButton>
                    </Tooltip>
                  </InputAdornment>
                ),
              },
            },
          }}
        />
      </LocalizationProvider>
    </StyledEngineProvider>
  </React.StrictMode>
);

[Missing endadornment] (https://i.sstatic.net/5JNeN3HO.png)

I've tried different workarounds using slots prop but can't really reach an elegant solution.