title: React TypeScript: Types of property 'X' are incompatible. Type 'Y' is not assignable to type 'Z'
body: <p>I am working on React-TypeScript app, creating credit card number imput component. While the user is entering a credit card number, the FontAwesome icon inside input should update to the brand image. I'm getting this error: </p>
  
  <pre><code>Types of property 'icon' are incompatible.
    Type 'string' is not assignable to type 'IconProp'
  </code></pre>
  
  <p>Already tried this solution that didn't worked for me: <a href="https://github.com/FortAwesome/react-fontawesome/issues/143#issuecomment-410677960" rel="noreferrer">https://github.com/FortAwesome/react-fontawesome/issues/143#issuecomment-410677960</a></p>
  
  <p>I thinks this is TypeScript issue, wrong types being passed to <code>icon</code> prop.</p>
  
  <p>This is simplified version of my tsx file, maybe it helps:</p>
  
  <pre><code>import { faCreditCard } from '@fortawesome/fontawesome-free-solid';
  import { faCcMastercard, faCcVisa } from '@fortawesome/free-brands-svg-icons';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  
  const CARD_TYPES: { [index: string]: string } = {
    mastercard: 'MASTERCARD',
    visa: 'VISA',
  };
  const CARD_ICONS: { [index: string]: any } = {
    mastercard: faCcMastercard,
    placeholder: faCreditCard,
    visa: faCcVisa,
  };
  
  interface IProps {
    placeholder: string;
    icon: string;
  }
  
  interface IState {
    cardIcon: string;
  }
  
  export default class CardNumber extends Component&lt;IProps,IState
  &gt; {
  
    constructor(props: IWmxCardNumberProps) {
     super(props);
     this.state = {
      cardIcon: CARD_ICONS.placeholder,
     };
    }
  
    componentDidMount() {
     this.setState({
      cardIcon: CARD_ICONS[cardType] || CARD_ICONS.placeholder
     });
    }
  
    onCardNumberChange(e: any) {
     this.setState({
      cardIcon: CARD_ICONS[cardType] || CARD_ICONS.placeholder
     });
    }
  
    public render() {
     const { cardIcon } = this.state;
     const { placeholder } = this.props;
  
     return (
      &lt;Container&gt;
       &lt;FieldWrapper&gt;
        &lt;InputWrapper data-max="9999 9999 9999 9999 9999"&gt;
          {/* Error: Types of property 'icon' are incompatible. Type 'string' is not assignable to type 'IconProp' */}
          &lt;FontAwesomeIcon icon={cardIcon} className="credit-card-icon" /&gt;
          &lt;Input
            type="tel"
            placeholder={placeholder}
            onChange={this.onCardNumberChange}
          /&gt;
        &lt;/InputWrapper&gt;
       &lt;/FieldWrapper&gt;
      &lt;/Container&gt;
     );
    }
  }
  </code></pre>
  
  <p>So how can i fix this error? </p>