Can't disable country selection if input is saved and disabled

[Katanis]

Hi, Using phone number input with react-hook-form, if input is disabled you can still change country code by clicking on flag. How to disable flag selection but still show country flag? disableDropdown prop works, but it removes country flag.

import MuiPhoneNumber, { MaterialUiPhoneNumberProps } from 'material-ui-phone-number';
import { Controller, ControllerProps, Path, PathValue } from 'react-hook-form';
import { genericMemo } from '../../app/generics';
import { useTranslation } from 'react-i18next';
import { interpolatedTranslation } from '../../app/i18n';
import { Box } from '@material-ui/core';

interface Props<T> {
  name: Path<T>;
  disabled?: boolean;
  control: ControllerProps<T>['control'];
  defaultValue?: PathValue<T, Path<T>>;
  isRequired?: boolean;
}

const PhoneNumberFieldComponent = <T extends Record<string, any>>({
  name,
  control,
  defaultValue,
  disabled = false,
  ...props
}: Props<T> & MaterialUiPhoneNumberProps) => {
  const { t } = useTranslation();
  return (
    <Box display="flex" flex={1} mb={3}>
      <Controller<T>
        name={name}
        control={control}
        defaultValue={defaultValue ?? ('' as any)}
        render={({ field, fieldState: { error } }) => (
          <MuiPhoneNumber
            error={!!error}
            helperText={error?.message && t(...interpolatedTranslation(error.message))}
            disabled={disabled}
            {...field}
            {...props}
          />
        )}
      />
    </Box>
  );
};

export const PhoneNumberField = genericMemo(PhoneNumberFieldComponent);

[PrgrmmrOleg]

The same problem

Any update?