title: Typescript throws error with spread operator
body: <p>I have the following simple React component:</p>
  
  <pre><code>export interface BadgeProps {
    children: React.ReactNode | string | React.ReactNode[],
    layout: "gray" | "danger" | "success" | "brand",
    size?: "sm" | "base",
  }
  
  const Badge: React.FC&lt;BadgeProps&gt; = ({ children }) =&gt; {
    return (
      &lt;div data-test="component-badge"&gt;{children}&lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>When I now call the component this way it works fine:</p>
  
  <pre><code>&lt;Badge layout="gray"&gt;Text&lt;/Badge&gt;
  </code></pre>
  
  <p>But when I pass the props with a spread operator, I get the following error.</p>
  
  <pre><code>const props = { layout: "gray" };
  return (
    &lt;Badge {...props}&gt;Text&lt;/Badge&gt;
  );
  </code></pre>
  
  <blockquote>
    <p>Type 'string' is not assignable to type '"gray" | "danger" | "success" | "brand"'</p>
  </blockquote>
  
  <p>I feel like it should just work fine and I have no idea why it fails. Is this a misunderstanding of how Typescript works?</p>