reactjs - タイプスクリプト エラー タイプ 'undefined' はインデックス タイプとして使用できません

Question

タイプスクリプト反応を使用しています。
xs、sm、md、lg は props で渡されます。
各サイズ (14px、16px、18px、24px) の px が Icon に渡されます。fontSize={FONTSIZE[size]}の箇所に(1)のエラーが表示されます。
<AtomLinkProps['size'], string>にエラー(2)が表示されます。

エラー

①Type 'undefined' cannot be used as an index type.ts(2538)  
②Type '(string & {} & ("xs" | "sm" | "md" | "lg")) | undefined' does not satisfy the constraint 'string | number | symbol'.
  Type 'undefined' is not assignable to type 'string | number | symbol'.ts(2344)

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 & {
  iconType?: 'openExternal';
  size?: 'xs' | 'sm' | 'md' | 'lg';
};

const FONTSIZE: Record<AtomLinkProps['size'], string> = {
  xs: '14px',
  sm: '16px',
  md: '18px',
  lg: '24px',
};
export const Link: FunctionComponent<AtomLinkProps> = ({
  size,
  iconType,
  children,
  ...props
}) => {
  const Icon: Record<'openExternal', JSX.Element> = {
    openExternal: <OpenExternalIcon fontSize={FONTSIZE[size]} />,
  };
  return (
    <ChakraLink size={size} {...props}>
      {children}
      {Icon[iconType!]}
    </ChakraLink>
  );
};

画像③

画像④ エラーメッセージ

Element implicitly has an 'any' type because expression of type '"lg" | ({} & "xs") | ({} & "sm") | ({} & "md")' can't be used to index type 'Record<FontSizeType, string>'.