title: Typescript: Type 'undefined' cannot be used as an index type.ts(2538)
body: <p>I am trying to learn typescript and i do not seem to get my head around how to fix error <code>Type 'undefined' cannot be used as an index type.ts(2538)</code>, keeping default prop values.</p>
  <p>Code:</p>
  <pre><code>interface PVIconInterface {
    name: string;
    size?: string;
    color?: string;
    rotate?: number
  };
  
  // Styled Components
  const IconContainer: any = styled.span &lt;{ $fontSize: string, $colorPath: string, $transform: string, theme: any }&gt;`
  display: inline-block;
  color: ${({ $colorPath, theme }) =&gt; getColor($colorPath, theme)};
  font-size: ${({ $fontSize }) =&gt; $fontSize};
  transform: ${({ $transform }) =&gt; $transform};
  `;
  
  const PVIcon: React.FC&lt;PVIconInterface&gt; = ({ name, size, color, rotate }) =&gt; {
   return (
     &lt;IconContainer
       className={`icon-${name}`}
       $colorPath={IconColorMap[color]}  //--- this is where TS gives error coz possible undefined
       $fontSize={IconSizeMap[size]}
       $transform={getTransformStyles(rotate)}
     /&gt;
   );
  };
  
  PVIcon.defaultProps = {
    color: 'normal',
    size: 'small',
    rotate: 0
  };
  
  export default PVIcon;
  </code></pre>
  <p>Any pointers are highly appreciated! Thanks</p>