Type of renderInput

I want to update a DatePicker component from "@mui/lab" to '@mui/x-date-pickers/' but typescript complains about the type of the render input provided. The material documentation seems to be outdated, there are no similar issues on the internet and try as I might I can't figure it out. Even if I try the basic example provided by material, there still seems to be an issue with the types.

Here is my code.

import React, { FC } from 'react';
import { styled, TextField } from '@mui/material';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';

export interface DatePickerProps {
  value: Date | null;
  placeholder?: string;
  isMobile: boolean;
  onChange: (
    value: Date | null,
    keyboardInputValue?: string | undefined,
  ) => void;
}

const StyledTextField = styled(TextField)(({ theme }) => ({
  '& .MuiInputAdornment-root': {
    marginRight: theme.spacing(1),
  },
}));

export const DatePicker: FC<DatePickerProps> = ({
  value = new Date(),
  placeholder,
  isMobile,
  onChange,
}) => {
  const DatePickerComponent = isMobile ? MobileDatePicker : DesktopDatePicker;
  return (
    <DesktopDatePicker
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      date={value}
      value={value}
      onChange={onChange}
      inputFormat='dd/MM/yyyy'
      renderInput={params => (
        <StyledTextField
          {...params}
          InputProps={{
            ...params.InputProps,
            sx: {
              padding: 1,
            },
            inputProps: {
              ...params.inputProps,
              placeholder,
              sx: { paddingTop: 1 },
            },
          }}
        />
      )}
    />
  );
};

And here is the error on renderInput prop.

Type 'SystemCssProperties<Theme>' is not assignable to type 'SystemStyleObject<Theme> | CssVariableType | ((theme: Theme) => string | number | SystemStyleObject<Theme>)'.ts(2322)