MUI TextField with Masked input and valid typescript

Question

I'm trying to get rid of this typescript warning using IMask and MUI's Textfield with a phone number mask. I'm fairly new to typescript, an I think I'm missing something with the IMaskMixin generics or something.

import { IMaskMixin } from 'react-imask';
import { TextField, TextFieldProps } from '@mui/material';
import { IMaskInputProps } from 'react-imask/esm/mixin';

interface MaskedStyledInputProps {
  inputRef: (ref: HTMLInputElement) => void;
  props: TextFieldProps & IMaskInputProps;
}

export const MaskedStyledInput = IMaskMixin(({ inputRef, ...props }: MaskedStyledInputProps) => (
  <TextField
    {...props}
    inputRef={inputRef} />
));

export const PhoneNumberInput = ({ ...props }: TextFieldProps) => {    
  return (
    <MaskedStyledInput
      {...props}
      mask="(000)000-0000"
      overwrite={true}
      // @ts-ignore -- TODO placeholder is not a valid prop for MaskedStyledInput, but i'm not sure how to fix this
      placeholder="(___)___-____"
    />
  );
};

placeholder is a property of TextFieldProps, I'm trying to define props as a union between TextFieldProps and IMaskInputProps. But I'm getting a warning:

Property 'placeholder' does not exist on type 'IntrinsicAttributes & IMaskInputProps<AnyMaskedOptions, false, string, HTMLInputElement, MaskedStyledInputProps>'.