Visual Studio Code – React-Admin TextInput properties have wrong type

I am doing a migration of React-Admin from 3.x.x to 4.7.4
As of now, style, route and all other components upgraded sucessfully.

But <TextInput/> does not work as intended even after following upgrade guide.

1. validate only trigger error, helperText and red line after submitting <SimpleForm/>

2. properties have wrong types.

   <TextInput/> definition from node_modules/ra-ui-materialui/src/input/TextInput.tsx:

   TextInput.propTypes = {
       className: PropTypes.string,
       label: PropTypes.oneOfType([
           PropTypes.string,
           PropTypes.bool,
           PropTypes.element,
       ]),
       options: PropTypes.object,
       resource: PropTypes.string,
       source: PropTypes.string,
   };
   
   TextInput.defaultProps = {
       options: {},
   };
   
   export type TextInputProps = CommonInputProps &
       Omit<ResettableTextFieldProps, 'label' | 'helperText'>;
   

   And InputProps definition from node_modules/ra-core/src/form/useInput.ts:

   export type InputProps<ValueType = any> = Omit<
       UseControllerProps,
       'name' | 'defaultValue' | 'rules'
   > &
       Partial<UseControllerReturn> & {
           alwaysOn?: any;
           defaultValue?: any;
           format?: (value: ValueType) => any;
           id?: string;
           isRequired?: boolean;
           label?: string | ReactElement | false;
           helperText?: string | ReactElement | false;
           name?: string;
           onBlur?: (...event: any[]) => void;
           onChange?: (...event: any[]) => void;
           parse?: (value: any) => ValueType;
           type?: string;
           resource?: string;
           source: string;
           validate?: Validator | Validator[];
       };
   

   Here is one of the many TextInput of my app:

import React, { memo } from 'react'
import {
  SimpleForm,
  TextInput,
  maxLength,
  required,
  useLocale,
} from 'react-admin'

import { CreateEditFormProps } from '../../types'
import { noEmptySpace } from '../uiTools/inputs/customValidators'

const VatRateCreateEditForm = (props: CreateEditFormProps) => {
  const { save, toolbar } = props
  const locale = useLocale()

  return (
    <SimpleForm
      margin="dense"
      redirect="false"
      save={save}
      toolbar={toolbar}
      variant="filled"
    >
      <TextInput
        label="resources.vat-rates.fields.vatName"
        source={`name_${locale}`}
        validate={[required(), maxLength(50), noEmptySpace]}
      />
    </SimpleForm>
  )
}

export default memo(VatRateCreateEditForm)

But visual studio code hover text display wrong types for source:

(property) source?: string | null | undefined

And display errors on validate and defaultValue properties:

Property 'validate' does not exist on type 'IntrinsicAttributes & Pick<InferProps<{ className: Requireable<string>; label: Requireable<NonNullable<string | boolean | ReactElementLike>>; options: Requireable<...>; resource: Requireable<...>; source: Requireable<...>; }>, "resource" | ... 2 more ... | "source"> & Partial<...> & Partial<...>'.

I tried multiple things but none worked:

1. I tried to import ra-ui-materialui in my package.json instead of letting react-admin import the dependencies itself.
2. I tried to override the propTypes to add validate and defaultValue but couldn’t find a way to.
3. I deleted and cleaned node_modules folder and used npm install multiple times.