gatsby - Tạo một component từ GatsbyLinkProps trong Typescript?

Tôi đang theo hướng dẫn này để thử xây dựng một vài thành phần cho ứng dụng của mình.

Tuy nhiên, tôi đang gặp lỗi khi cố gắng xây dựng một thành phần Link tùy chỉnh sử dụng thành phần Link của 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>;
    };

Lỗi

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

Làm thế nào tôi có thể xây dựng một kiểu Link tùy chỉnh dựa trên Link của Gatsby trong khi tích hợp styled-system của tôi trong Typescript?