title: 'ReactNode' is not a valid JSX element
body: <p>I have the following piece of code (<a href="https://codesandbox.io/s/react-typescript-forked-50beyp?file=/src/App.tsx" rel="nofollow noreferrer">codesandbox</a>):</p>
  <pre><code>import { ComponentType, ReactNode } from &quot;react&quot;;
  
  type DatetimeCell = ({ value }: { value: string }) =&gt; ReactNode;
  
  function getDateTimeCell(): DatetimeCell {
    return ({ value }) =&gt; value;
  }
  
  function buildCell({
    value
  }: {
    value: string;
  }): ComponentType&lt;{ value: string }&gt; {
    const DateTimeCell = getDateTimeCell();
    return ({ value }) =&gt; &lt;DateTimeCell value={value} /&gt;;
  }
  </code></pre>
  <p>When returning in <code>buildCell</code> I get the error:</p>
  <pre><code>'DateTimeCell' cannot be used as a JSX component.
    Its return type 'ReactNode' is not a valid JSX element.
  </code></pre>
  <p>I thought <code>ReactNode</code> would be the most general type for valid JSX, but it seems like that is not the case.<br />
  Why is <code>ReactNode</code> not valid JSX and how can I solve this issue?</p>
  <p><strong>Edit:</strong>
  I know that wrapping <code>value</code> in React fragments solves the issue. However, in this specific application I need the type <code>DatetimeCell</code> to be able to return any valid JSX. So <code>string</code> should be included.</p>