title: TypeScript React Component with specific string value parameter is not assignable
body: <p>I am trying to create a TypeScript react component whose parameter is a specific string value based on an object. However, I am getting the following linting error:</p>
  
  <blockquote>
    <p>TS2322: Type 'string' is not assignable to type "a" | "b" | "c".</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/KL3Cp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KL3Cp.png" alt="enter image description here"></a></p>
  
  <pre><code>import * as React from 'react';
  
  export const obj = {
    a: 1,
    b: 2,
    c: 3,
  };
  
  interface Props {
    id: keyof typeof obj;
  }
  
  const SampleComponent: React.FC&lt;Props&gt; = ({ id }) =&gt; &lt;h1&gt;{id}&lt;/h1&gt;;
  
  const SampleComponentTwo: React.FC = () =&gt; (
    &lt;React.Fragment&gt;
      {
        Object.keys(obj).map(id =&gt; (
          &lt;SampleComponent id={id} /&gt;
        ))
      }
    &lt;/React.Fragment&gt;
  );
  </code></pre>