title: Typescript error with styled-components and AS TS2769: No overload matches this call
body: <p>I would like a simple component that I can style and pass a prop the <code>output</code> element type with <a href="https://styled-components.com/docs/api#as-polymorphic-prop" rel="nofollow noreferrer"><code>as</code></a>. Using version <code>5</code> of <code>styled-components</code> and <code>4</code> for <code>TS</code></p>
  <p>However I get the following TS error</p>
  <h2>TS error</h2>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(props: Omit&lt;Omit&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLParagraphElement&gt;, HTMLParagraphElement&gt;, &quot;key&quot; | keyof HTMLAttributes&lt;...&gt;&gt; &amp; { ...; }, never&gt; &amp; Partial&lt;...&gt;, &quot;theme&quot;&gt; &amp; { ...; } &amp; { ...; }): ReactElement&lt;...&gt;', gave the following error.
      Type 'string' is not assignable to type 'undefined'.
    This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.  TS2769
  
      11 |     color: #000;
      12 |   `
    &gt; 13 |   return &lt;Component as={as}&gt;{children}&lt;/P&gt;
         |          ^
      14 | }
      15 |
  </code></pre>
  <p>The key part of this error is here I believe <code>Type 'string' is not assignable to type 'undefined'.</code> However my understanding was that with the <code>{as = 'p'}</code> this was the default value for <code>as</code>?</p>
  <h2>Component</h2>
  <pre><code>import React, { ReactChildren } from 'react'
  import styled from 'styled-components'
  
  export interface TextProps {
    as?: string
    children?: ReactChildren | React.ReactNode | string
  }
  
  export const Text = ({ as = 'p', children }: TextProps) =&gt; {
    const Component = styled.p`
      color: #000;
    `
    return &lt;Component as={as}&gt;{children}&lt;/Component&gt;
  }
  </code></pre>