Creating a component from GatsbyLinkProps in Typescript?

I am following this guide to try and build a couple of components for my application.

However, I am running to an error when trying to build a custom Link component using Gatsby's Link component.

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

Error

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

How can i construct a custom Link type based of Gatsby's Link while baking in my styled-system in Typescript?