title: JSX element type 'xxx' is not a constructor function for JSX elements. Property 'yyy' is protected in type 'xxx' but public in type 'ElementClass'
body: <p>I am trying to import an React class called <a href="https://github.com/vega/voyager/blob/master/src/components/vega-lite/index.tsx#L18" rel="noreferrer"><code>Vega-Lite</code></a> from a project called <a href="https://github.com/vega/voyager" rel="noreferrer"><code>Voyager</code></a>. </p>
  
  <p>Here's my code:</p>
  
  <pre><code>import * as React from 'react';
  import {VegaLite} from 'datavoyager/build/components/vega-lite';
  
  export interface Props {
    spec: any;
    logger: any;
  }
  
  export const View = ({spec, logger}: Props) =&gt; {
    return(
      &lt;VegaLite spec={spec} logger={logger}/&gt;
    );
  };
  </code></pre>
  
  <p>Here's my error:</p>
  
  <blockquote>
    <p>[ts] JSX element type 'VegaLite' is not a constructor function for JSX
    elements.   Property 'componentDidMount' is protected in type
    'VegaLite' but public in type 'ElementClass'.</p>
  </blockquote>
  
  <p>I know that in the class <a href="https://github.com/vega/voyager/blob/master/src/components/vega-lite/index.tsx#L18" rel="noreferrer"><code>Vega-Lite</code></a>, the function <code>componentDidMount()</code> is indeed <code>protected</code>. But how do I fix this error?</p>
  
  <p>PS: I've tried setting <code>allowSyntheticDefaultImports</code> to <code>true</code> in my <code>tsconfig.json</code>, but the same error persists.</p>