Material UI + Typescript: Types of property 'color' are incompatible

I am trying to use the DatePicker component but the types are not working even though I am just passing the props provided by Material UI.

Here's a codesandbox link: https://codesandbox.io/s/typescript-material-ui-datepicker-5wil8?file=/src/App.tsx:2395-2412

import React from 'react';
import styled from 'styled-components';

import TextField from '@material-ui/core/TextField';
import { InputProps } from '@material-ui/core/Input';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
import { AUTOCOMPLETE_TYPES } from 'constants/properties';

const StyledDatePicker = styled(DesktopDatePicker)``;

const StyledTextField = styled(TextField)``;

export interface DatePickerProps {
  label: string;

  className?: string;
  disabled?: boolean;
  error?: string | boolean;
  onChange?: (v: string) => void;
  name?: string;
  value?: string | number | Date;
  min_date?: string | number | Date;
  max_date?: string | number | Date;
  placeholder?: string;
  autocomplete?: AUTOCOMPLETE_TYPES;
}

const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(
  (
    {
      value,
      label,
      disabled = false,
      autocomplete,
      placeholder = 'mm/dd/yyyy',
      onChange,
      min_date,
      max_date,
      name,
      error,
      className,
    },
    ref
  ) => (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StyledDatePicker
        inputRef={ref}
        minDate={min_date ? new Date(min_date) : undefined}
        maxDate={max_date ? new Date(max_date) : undefined}
        value={value}
        onChange={(newValue) => onChange && onChange(newValue as string)}
        disabled={disabled}
        renderInput={(props) => (
          <TextField
            {...props}
            error={!!error || (props.error && value !== '')}
            className={className}
            fullWidth
            helperText={error}
            id={name}
            label={label}
            name={name}
            variant="outlined"
            inputProps={{
              ...props.inputProps,
              placeholder,
              id: `${name}-textfield`,
              autoComplete: autocomplete,
            }}
            InputLabelProps={{
              ...props.InputLabelProps,
              color: "primary",
              id: `${name}-textfield-label`,
              htmlFor: `${name}-textfield`,
            }}
          />
        )}
      />
    </LocalizationProvider>
  )
);

export default DatePicker;

Even when I set color="primary" it doesn't work

package.json

    "@material-ui/core": "4.12.3",
    "@material-ui/lab": "4.0.0-alpha.60",
    "@mui/lab": "5.0.0-alpha.58",
    "@mui/material": "5.2.2",

I figured it out but still don't know the reason.

I looked at MUI's example for DesktopDatePicker: https://mui.com/components/date-picker/#responsiveness

and I noticed they were importing from a different library. The one from @material-ui/core is incompatible for some reason.

// import TextField from "@material-ui/core/TextField";
import TextField from '@mui/material/TextField';