title: Flow: "Cannot access computed property using undefined [1]" when using default props for functional react components
body: <pre><code>/* @flow */
  
  import React from 'react';
  
  type Props = {
    variant?: string,
  }
  
  const colors = {
    textColor: {
      disabled: '#868e96',
      primary: '#ffffff',
    }
  };
  
  const Button = (props: Props) =&gt; {
    const { variant } = props;
  
    return (
      &lt;span style={{ color: colors.textColor[variant] }}&gt;
        Foo
      &lt;/span&gt;
    );
  };
  
  Button.defaultProps = {
    variant: 'primary',
  };
  
  export default Button;
  </code></pre>
  
  <p>The above code results in the following flow error:</p>
  
  <pre><code>Cannot access computed property using  undefined [1].
  </code></pre>
  
  <p>I've also added the example to the <a href="https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBcwAlAUwEMBjYqfOLMAcn0pqYG51CBPHMsAAV6OAM5gAvGADeqMGABuFfBgoA7QgH4AXGFGEVagOYAaVAF90VOGv1hr8fOKmz5hMgA9CAYTiPdrvJgACYYohQARjBkwbpMAMQAHABsiWQAnMlMZkFgOCpYyjxx8VBl5dlyYJbmXKjWtsQAQgCuhIQ2kmAAFPlwYrrC-aIAlJIAfDJVDXbSisqqGtVdfWJ18qyELfhqPVXyADyiOOp6vNES0nMOBLo3TgB07l6+jgDaSirqhAC61ebjfZBABicDgQIOwGO6kB8hGXFq6Fa7RsD2CZCgFBaMEIQzEXUCn0WhDi+WwRUqiNQnjwRBCGKxOLAyI6ai4QA" rel="nofollow noreferrer">Flow editor</a>.</p>
  
  <p>It seems that Flow cannot determine the type of the <code>variant</code> variable, as hovering over it shows:</p>
  
  <pre><code>void | string
  const variant: string
  </code></pre>
  
  <p>However, this makes no sense, since either <code>variant</code> would be a string (if the prop is passed), or it would default to <code>'primary'</code>, which also is a string.</p>
  
  <p>I've also checked the official documentation:<br>
  <a href="https://flow.org/en/docs/react/components/#toc-using-default-props-for-functional-components" rel="nofollow noreferrer">Using Default Props for Functional Components</a></p>
  
  <p>What am I doing wrong?</p>