Создание компонента из GatsbyLinkProps в Typescript?

Question

Я следую этому руководству , чтобы попытаться создать пару компонентов для моего приложения.

Однако у меня возникает ошибка при попытке создать пользовательский Link компонент используя компонент Гэтсби Link.

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>;
    };

Ошибка

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

Как я могу создать собственный тип ссылки на основе ссылки Гэтсби во время выпечки в моей стилизованной системе в Typescript?