title: React-styledComponents: Types of property 'children' are incompatible
body: <p>I am trying make Reuse-able style-components cards. I used typescript for my React app. I made children type <code>children?: string | JSX.Element</code>. But in my card container it got undefined and give typescript error: <code>Types of property 'children' are incompatible.</code> even though I made <code>children optional</code>. I Really don't get what is main error and how to fix it.</p>
  <p>I share my code in <a href="https://codesandbox.io/s/cards-typescript-5pmyy?file=/src/App.tsx" rel="nofollow noreferrer">code-sandbox</a>.
  <code>**Ps: It does not thorw errors in codesandbox**</code></p>
  <p><strong>This is my card component</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  
  export interface ICardProps {
    title?: string;
    secondaryText?: string;
    hoverable?: boolean;
    thumbnailUrl?: string;
    coverImage?: string;
    url?: string;
    children?: string | JSX.Element;
  }
  
  const Container = styled.div&lt;ICardProps&gt;`
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
      0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px;
    border-radius: 6px;
    background: white;
    margin-bottom: 20px;
    &amp;:hover {
      ${({ hoverable }) =&gt;
      hoverable
        ? `box-shadow: 0 0 20px rgba(0, 0, 0, 0.05), 0 0px 60px rgba(0, 0, 0, 0.08)`
        : null}
    }
  `;
  
  const Title = styled.h1`
    margin: 0;
    font-size: 24px;
  `;
  const SecondaryText = styled.p`
    margin: 0;
    color: #6b6b6b;
  `;
  
  const Thumbnail = styled.div&lt;ICardProps&gt;`
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-image: url(${({ url }) =&gt; url});
    background-size: cover;
    margin-right: 10px;
  `;
  const TitleBar = styled.div`
    display: flex;
    align-items: center;
  `;
  
  const CoverImage = styled.img`
    width: 100%;
    border-radius: 6px 6px 0 0;
  `;
  const Content = styled.div`
    padding: 20px;
  `;
  
  const ChildrenContent = styled.div`
    background: pink;
  `;
  
  const Card = ({
    title,
    secondaryText,
    thumbnailUrl,
    coverImage,
    children,
    hoverable,
    ...props
  }: ICardProps) =&gt; {
    return (
      &lt;Container
        {...props}
        {...{ hoverable, title, secondaryText, thumbnailUrl, coverImage, ...props }}&gt;
        {coverImage ? &lt;CoverImage src={coverImage} /&gt; : null}
        &lt;Content&gt;
          &lt;TitleBar&gt;
            {thumbnailUrl ? &lt;Thumbnail url={thumbnailUrl} /&gt; : null}
            &lt;div&gt;
              {title ? &lt;Title&gt;{title}&lt;/Title&gt; : null}
              {secondaryText ? &lt;SecondaryText&gt;{secondaryText}&lt;/SecondaryText&gt; : null}
            &lt;/div&gt;
          &lt;/TitleBar&gt;
          {typeof children === `string` ?
            &lt;ChildrenContent&gt; {children}&lt;/ChildrenContent&gt; :
            children
          }
        &lt;/Content&gt;
      &lt;/Container&gt;
    )
  };
  
  export default Card;
  </code></pre>
  <p><strong>This is how I am trying to use it</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import styled from &quot;styled-components/macro&quot;;
  import { Card } from &quot;./lib/Card&quot;;
  
  const ThinnerCard = styled(Card)`
    width: 400px;
  `;
  export default function App() {
    return (
      &lt;div&gt;
        &lt;ThinnerCard
          coverImage=&quot;http://www.fillmurray.com/500/300&quot;
          thumbnailUrl=&quot;http://www.fillmurray.com/100/100&quot;
          title=&quot;This is the title&quot;
          secondaryText=&quot;Secondary title&quot;
        /&gt;
  
        &lt;Card title=&quot;Only a title&quot; secondaryText=&quot;And a second text&quot; /&gt;
  
        &lt;Card&gt;
          &lt;h1&gt; Hello I'm a &quot;children&quot; props&lt;/h1&gt;
        &lt;/Card&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>