MUI X DateRangePicker: does not provide an export named 'DateRange'

Hello all,

I have an issue with the MUI X package, specifically the DateRangePicker. The documentation on the DateRangePicker is a bit unclear and I am unable to resolve this issue on my own. It throws out an error, which is the following:

Uncaught SyntaxError: The requested module @mui_x-date-pickers-pro_DateRangePicker.js' does not provide an export named 'DateRange'

Sounds fair, the module does not export it. However, then taking a look at the example provided by MUI here, the implementation is the same. Including the required and installed packages;

import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const [value, setValue] = React.useState<DateRange<Date>>([null, null]);

<LocalizationProvider dateAdapter={AdapterDateFns}>
    <DateRangePicker
            startText="Check-in"
            endText="Check-out"
            value={value}
            onChange={(newValue) => {
    setValue(newValue);
    }}
    renderInput={(startProps, endProps) => (
    <React.Fragment>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}> to </Box>
        <TextField {...endProps} />
    </React.Fragment>
    )}
    />
</LocalizationProvider>

And the following is in my package.json;

"@mui/x-date-pickers": "latest",
"@mui/x-date-pickers-pro": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"date-fns": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",

However the issue still occurs. And I have no clue why, since it's following the documentation and exact example. However, I can't get it to work. I tried it on a seperate project, with the same results. What am I overlooking?