title: React TypeScript component with two different prop interfaces
body: <p>I want to create a React TypeScript component whose props is a union of two different interfaces. However, when I do so, I get the warning:</p>
  
  <pre><code>TS2339: Property 'color' does not exist on type 'PropsWithChildren&lt;Props&gt;'
  </code></pre>
  
  <p>How can I create a React TypeScript component with a union of two different prop interfaces and at the same time am able to destructure those props? Thanks!</p>
  
  <p><strong>sampleComponent.tsx:</strong></p>
  
  <pre><code>import * as React from 'react';
  
  interface SamplePropsOne {
    name: string;
  }
  
  interface SamplePropsTwo {
    color: string;
  }
  
  type Props = SamplePropsOne | SamplePropsTwo;
  
  const SampleComponent: React.FC&lt;Props&gt; = ({ color, name }) =&gt; (
    color ? (
      &lt;h1&gt;{color}&lt;/h1&gt;
    ) : (
      &lt;h1&gt;{name}&lt;/h1&gt;
    )
  );
  
  export default SampleComponent;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NY2v7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NY2v7.png" alt="enter image description here"></a></p>