title: Typescript and React: Type 'Element' is not assignable to type 'FunctionComponent<{}>'
body: <p>I am converting a react project over to typescript and I'm having an issue.  The scenario is this:  I have a series of <code>Chapter</code> components.  Each <code>Chapter</code> is associated with its own unique data and unique <code>Map</code> component. Each <code>Chapter</code> renders a <code>ChapterTemplate</code>, and passes the <code>Map</code> as a prop:</p>
  <pre class="lang-js prettyprint-override"><code>// Chapter.tsx
  
  import model from './modal';
  import Map from './Map';
  
  type ChapterProps = {
      data: ModelSchema;
      map: ReactElement;
  };
  
  const Chapter: FunctionComponent&lt;ChapterProps&gt; = () =&gt; {
      return &lt;ChapterTemplate data={model} map={&lt;Map /&gt;} /&gt;;
  };
  </code></pre>
  <p>This is giving me the following ts error at <code>map={&lt;Map /&gt;}</code>:</p>
  <p><code>Type 'Element' is not assignable to type 'FunctionComponent&lt;{}&gt;'. Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement&lt;any, any&gt;'.</code></p>
  <p>I am not sure how to type this prop based on how I am using it.</p>
  <p>For some context, here is what a <code>&lt;Map /&gt;</code> component should look like:</p>
  <pre><code>type MapProps = {
      metadata?: {
          name: string;
          theme: string;
      };
      mapState?: {
          center: number[];
          zoom: number;
          basemap: any;
          layers: any[];
      };
  };
  
  const Map = ({
      metadata,
      mapState: { basemap, layers, zoom, center },
  }: MapProps) =&gt; {
    
    // ... custom logic here for each chapter ...
  
  }
  </code></pre>
  <p>Ultimately it is the <code>ChapterTemplate</code> component that organizes the data, manages the state, and passes certain pieces of data to the <code>Map</code> as props using <code>React.cloneElement</code>:</p>
  <pre class="lang-js prettyprint-override"><code>const Chapter = ({
    map,
    data: { pages, metadata },
  }: ChapterProps) =&gt; {
    const [currentPage, setCurrentPage] = useState(0);
    const Map = map;
  
    return (
      &lt;Wrapper&gt;
        // Some other stuff in here
        &lt;MapContainer&gt;
          {cloneElement(map as null, {
            mapState: pages[currentPage].mapState,
            metadata,
          })}
        &lt;/MapContainer&gt;
      &lt;/Wrapper&gt;
    );
  };
  </code></pre>
  <p>I read the question <a href="https://stackoverflow.com/questions/42261783/how-to-assign-the-correct-typing-to-react-cloneelement-when-giving-properties-to">How to assign the correct typing to React.cloneElement when giving properties to children?</a>, which is where I got the idea to use <code>ReactElement</code> as the type for my <code>map</code> prop.  I tried using <code>map as ReactElement&lt;any&gt;</code> in my <code>cloneElement</code> call but it was still giving me errors, so I gave up and put in <code>as null</code> for now.  But I am still getting this error.  For the record, the code does work and compile - react is happy with my syntax and organization.  But is typescript trying to tell me something about the way I'm using a component as a prop?  Is there a more proper way to do this?  Thanks for reading.</p>