title: Object is possibly 'undefined' when using array values with styled-components
body: <p>I'm building a Skeleton component that accepts a prop called <code>circleSizes</code>, which is an array of numbers to set the width and height of the Skeleton.</p>
  <p>This is the component:</p>
  <pre><code>export const SkeletonHandler: React.FC&lt;SkeletonHandlerProps&gt; = ({
    count = 1,
    circle = false,
    circleSizes = [50, 50],
  }) =&gt; {
    return (
      &lt;SkeletonWrapper count={count} circleSizes={circleSizes}&gt;
        &lt;Skeleton count={count} circle={circle} /&gt;
      &lt;/SkeletonWrapper&gt;
    );
  };
  </code></pre>
  <p>My types.ts:</p>
  <pre><code>export type SkeletonHandlerProps = {
    count?: number;
    circle?: boolean;
    circleSizes?: Array&lt;number&gt;;
  };
  </code></pre>
  <p>I know that if I remove the <code>?</code>, the error will go away but I don't want this property to be required.</p>
  <p>And my styled-components file:</p>
  <pre><code>export const SkeletonWrapper = styled.div&lt;SkeletonHandlerProps&gt;`
    width: ${(circle) =&gt; (circle ? 'fit-content' : '100%')};
    ${({ circle, circleSizes }) =&gt;
      circle &amp;&amp;
      css`
        .react-loading-skeleton {
          width: ${circleSizes[0]};
          height: ${circleSizes[1]};
        }
      `}
  `
  </code></pre>
  <p>Image error: <a href="https://i.stack.imgur.com/AFJjl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AFJjl.png" alt="enter image description here" /></a></p>
  <p>What I have tried:</p>
  <ol>
  <li>Putting a default value for the circleSizes array at props, e.g: <code>circleSizes = [50, 50]</code></li>
  <li>Putting a default value on types.ts, e.g: <code>circleSizes?: Array&lt;number&gt; | [50, 50];</code></li>
  <li>Converting circleSizes to number on the styled-components file, e.g: <code>width: ${Number(circleSizes[0])};</code></li>
  </ol>
  <p>What I'm doing wrong?</p>