title: How to pass children type to props of HOC react
body: <p>I am new to TypeScript and I am struggling to write HOC with typecheck.
  Here's my HOC:</p>
  
  <pre><code>import React from 'react';
  import Firebase from './Firebase';
  
  export type FirebaseType = Firebase;
  
  interface OwnProps {
    firebase: typeof Firebase;
  }
  
  const FirebaseContext = React.createContext(new Firebase());
  
  export const withFirebase: React.FC = &lt;T extends OwnProps&gt;(
    Component: React.ComponentType&lt;T&gt;,
  ): React.ComponentType&lt;T&gt; =&gt; (props) =&gt; (
    &lt;FirebaseContext.Consumer&gt;
      {(firebase: FirebaseType) =&gt; &lt;Component {...props} firebase={firebase} /&gt;}
    &lt;/FirebaseContext.Consumer&gt;
  );
  
  export default FirebaseContext;
  </code></pre>
  
  <p>It throws an error:</p>
  
  <blockquote>
    <p>Type '(Component: React.ComponentType) =>
    React.ComponentType' is not assignable to type 'FC&lt;{}>'.   Types of
    parameters 'Component' and 'props' are incompatible.
        Type '{ children?: ReactNode; }' is not assignable to type 'ComponentType'.
          Type '{ children?: ReactNode; }' is not assignable to type 'FunctionComponent'.
            Type '{ children?: ReactNode; }' provides no match for the signature '(props: PropsWithChildren, context?: any):
    ReactElement ReactElement Component)> | null) | (new
    (props: any) => Component&lt;...>)> | null'.ts(2322)</p>
  </blockquote>
  
  <p>I have <strong><em>absolutely no idea</em></strong> how to move on with this code or how to make it work.</p>
  
  <p>Any thoughts?</p>