title: No overload matches this call and Types of parameters '__0' and 'props' are incompatible when passing custom params to library function on typescript
body: <p>I am using the react-toast-notifications to build my system and I had the need to create a parameter where I could pass the title of the toast notification, because of that now I have an alert on my IDE where it says: <code>No overload matches this call. Overload 1 of 2, '(props: ToastProviderProps, context?: any): ReactElement&lt;any, any&gt; | Component&lt;ToastProviderProps, any, any&gt; | null', gave the following error. Type '({ children, appearance, onDismiss, title }: { children: any; appearance: string; onDismiss: any; title: string; }) =&gt; JSX.Element' is not assignable to type 'ComponentType&lt;ToastProps&gt; | undefined'.</code></p>
  <p>When I delete the custom parameter &quot;title&quot; the error dissapears, this is unabling me to do npm run build. Here is my code:</p>
  <p>index.tsx=&gt;</p>
  <pre><code>ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;ToastProvider components={{Toast *(the error appears here)*: MyCustomToast}}&gt;
        &lt;App /&gt;
      &lt;/ToastProvider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  )
  </code></pre>
  <p>CustomToast.tsx =&gt;</p>
  <pre><code>const MyCustomToast = ({children, appearance, onDismiss, title}: 
      {children: any, appearance: string, onDismiss: any, title:string}) =&gt; { return(
        &lt;div className={toastAppearance(appearance)}&gt;      
          &lt;div className=&quot;toast&quot;&gt;
            &lt;div className=&quot;row&quot;&gt;
              &lt;div&gt;
                &lt;p style={{fontSize: &quot;16px&quot;, fontWeight: 600}}&gt;{toastTitle(appearance, title)}&lt;/p&gt;
                {children}
              &lt;/div&gt;
              &lt;div onClick={onDismiss} style={{cursor: 'pointer'}}&gt;
                &lt;svg className=&quot;svg-icon&quot; viewBox=&quot;0 0 20 20&quot;&gt;
                  &lt;path fill=&quot;none&quot; d=&quot;M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z&quot;&gt;&lt;/path&gt;
                &lt;/svg&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    )}
    
    export default MyCustomToast
  </code></pre>
  <p>usage of the function with parameters =&gt;</p>
  <pre><code>ngos.length &gt; 0 ? addToast(`${t(`WEBSITE_TEXT_YOUR_SEARCH_RETURNED`)} ${response.data.total} ${t(`WEBSITE_TEXT_RESULTS`)}`, { appearance: 'info', autoDismiss: true, title: 'Result: ' }) : addToast(`${t(`WEBSITE_TEXT_NO_NGOS_WERE_FOUND`)}`, { appearance: 'error', autoDismiss: true })
  </code></pre>