title: How to define an interface for React function component with defaultProps without throwing missing type error?
body: <p>I've been searching through many forums and articles and did not find any successful way to define an interface for a function component in React that has required properties which are defined in defaultProps without throwing a "property is missing" Typescript error.</p>
  
  <p>I've tried to set a default value directly in props but it doesn't work either. Is there any way or it's unresolved issue in React and Typescript?</p>
  
  <p>To see this problem in action, I've provided CodeSandbox project.</p>
  
  <p><a href="https://codesandbox.io/s/misty-pine-rtdl8?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit misty-pine-rtdl8"></a></p>
  
  <pre><code>type ButtonProps = {
    color: "white" | "green";
  };
  
  const Button: FunctionComponent&lt;ButtonProps&gt; = ({
    // First way to define default value
    color = "green",
    children
  }) =&gt; &lt;ButtonContainer&gt;{children}&lt;/ButtonContainer&gt;;
  
  // Second way to define default value
  Button.defaultProps = {
    color: "white"
  } as Partial&lt;ButtonProps&gt;;
  
  const ButtonContainer = styled.button&lt;ButtonProps&gt;`
    background-color: ${(props: ButtonProps) =&gt; props.color};
  `;
  
  const App: FunctionComponent = () =&gt; (
    &lt;div className="App"&gt;
      &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
      &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      {/* Here is an error */}
      &lt;Button&gt;hello world&lt;/Button&gt;
    &lt;/div&gt;
  );
  </code></pre>