gatsby - Criando um componente a partir de GatsbyLinkProps em Typescript?

Estou seguindo este guia para tentar construir alguns componentes para o meu aplicativo.

No entanto, estou encontrando um erro ao tentar construir um componente Link personalizado usando o componente Link do Gatsby.

Typography.tsx

import { Link as GLink, GatsbyLinkProps } from 'gatsby';

type GatsbyAnchorProps = StyledSystemProps & GatsbyLinkProps<any>;

const GatsbyLink: SFC<GatsbyAnchorProps> = ({ to, children, ...props }) => (
  <GLink to={to}>
    <DynamicStyledSystemComponent {...typographyStyles.Link} {...props}>
      {children}
    </DynamicStyledSystemComponent>
  </GLink>
);

DynamicStyledSystemComponent.tsx

export type StyledSystemProps =
  | SpaceProps
  | FontSizeProps
  | FontStyleProps
  | SizeProps
  | TextStyleProps
  | LetterSpacingProps
  | FontFamilyProps
  | FontWeightProps
  | BorderRadiusProps
  | FontFamilyProps
  | LineHeightProps
  | TextAlignProps
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  | {
      color: string;
      as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
    };

Erro

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   return (
>     <React.Fragment>
|       {finalData && render(finalData)}
|       {!finalData && <div>Loading (StaticQuery)</div>}
 @ ./src/components/atoms/typography/Typography.tsx 31:15-32
 @ ./src/components/atoms/typography/Typography.stories.tsx

Como posso construir um tipo de Link personalizado baseado no Link do Gatsby enquanto incorporo meu styled-system em Typescript?