title: Objects are not valid react child when using React.createElement?
body: <p>I have a simple text component:</p>
  <pre><code>import * as React from 'react'
  
  interface IProps {
    level: 't1' | 't2' | 't3',
    size: 's' | 'm' | 'l' | 'xl' | 'xxl',
    subtle?: boolean,
    children: any,
  }
  
  const textSize = (size) =&gt; {
    if (size === 's') {
      return 'f6'
    }
    if (size === 'm') {
      return 'f5 fw3'
    }
    if (size === 'l') {
      return 'f4 fw5  lh-2'
    }
    if (size === 'xl') {
      return 'f3 fw5 lh-2 ls-025 ma0'
    }
    if (size === 'xxl') {
      return 'f2 fw5 lh-title ls-03125 ma0 mb3'
    }
  }
  
  const elements = {
    t1: 'h2',
    t2: 'h1',
    t3: 'span',
  };
  
  
  export const Text = ({ children, level, size, subtle, ...props }: IProps) =&gt; {
    return React.createElement(
      elements[level] || elements.t3,
      {className: textSize(size)},
      props,
      children,
    );
  }
  </code></pre>
  <p>Which is used like so:</p>
  <pre><code>    &lt;Text
        size='s'
        level={'t3'}&gt;
          Hello world
      &lt;/Text&gt;
  </code></pre>
  <p>However, when the line <code>{className: textSize(size)},</code> is included in the main component I get the following error:</p>
  <blockquote>
  <p>Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. in span in Unknown`</p>
  </blockquote>
  <p>Any ideas what can cause this?</p>
  <p><a href="https://codesandbox.io/s/relaxed-mountain-uwroo?file=/src/index.tsx" rel="nofollow noreferrer">Codesandbox</a></p>