title: Wrapping a react-bootstrap component Typescript error
body: <p>I'm trying to create a wrapper component around Bootstrap's <code>Alert</code> component. </p>
  
  <p>The <code>Alert</code> component has <code>Link</code> and <code>Heading</code> properties on it so you can do <code>&lt;Alert.Link&gt;</code>- see <a href="https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Alert.js#L119" rel="nofollow noreferrer">https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Alert.js#L119</a>. </p>
  
  <pre><code>import React from 'react';
  import BootstrapAlert, { AlertProps } from 'react-bootstrap/Alert';
  
  const Alert = (props: AlertProps) =&gt; {
    return &lt;BootstrapAlert bsPrefix="my-app-alert" {...props} /&gt;;
  };
  
  export default Alert;
  </code></pre>
  
  <p>When I render:</p>
  
  <pre><code>&lt;Alert variant='primary'&gt;
    Hello 
    &lt;Alert.Link href="#"&gt;world&lt;/Alert.Link&gt;
  &lt;/Alert&gt;
  </code></pre>
  
  <p>I get the Typescript error:</p>
  
  <pre><code>Property 'Link' does not exist on type '(props: AlertProps) =&gt; Element'.ts(2339)
  </code></pre>