title: Typescript error Type 'undefined' cannot be used as an index type
body: <p>I'm using typescript react.<br />
  xs,sm,md,lg are passed in props.<br />
  The px for each size (14px, 16px, 18px, 24px) is passed to Icon.
  The error shown in (1) is displayed at the place where fontSize={FONTSIZE[size]}.<br />
  The error (2) is displayed at &lt;AtomLinkProps['size'], string&gt;.</p>
  <p>error</p>
  <pre><code>①Type 'undefined' cannot be used as an index type.ts(2538)  
  ②Type '(string &amp; {} &amp; (&quot;xs&quot; | &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;)) | undefined' does not satisfy the constraint 'string | number | symbol'.
    Type 'undefined' is not assignable to type 'string | number | symbol'.ts(2344)
  </code></pre>
  <pre><code>import React from 'react';
  import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
  import { FunctionComponent } from 'react';
  import { OpenExternalIcon } from './Icon/OpenExternalIcon';
  
  export type AtomLinkProps = LinkProps &amp; {
    iconType?: 'openExternal';
    size?: 'xs' | 'sm' | 'md' | 'lg';
  };
  
  const FONTSIZE: Record&lt;AtomLinkProps['size'], string&gt; = {
    xs: '14px',
    sm: '16px',
    md: '18px',
    lg: '24px',
  };
  export const Link: FunctionComponent&lt;AtomLinkProps&gt; = ({
    size,
    iconType,
    children,
    ...props
  }) =&gt; {
    const Icon: Record&lt;'openExternal', JSX.Element&gt; = {
      openExternal: &lt;OpenExternalIcon fontSize={FONTSIZE[size]} /&gt;,
    };
    return (
      &lt;ChakraLink size={size} {...props}&gt;
        {children}
        {Icon[iconType!]}
      &lt;/ChakraLink&gt;
    );
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/DDjKp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DDjKp.png" alt="enter image description here" /></a></p>
  <p>image③
  <a href="https://i.stack.imgur.com/e4RGj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e4RGj.png" alt="enter image description here" /></a></p>
  <p>image④
  erormessage</p>
  <pre><code>Element implicitly has an 'any' type because expression of type '&quot;lg&quot; | ({} &amp; &quot;xs&quot;) | ({} &amp; &quot;sm&quot;) | ({} &amp; &quot;md&quot;)' can't be used to index type 'Record&lt;FontSizeType, string&gt;'.
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3FKc1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3FKc1.png" alt="enter image description here" /></a></p>