Using generated graphql query types with my custom React hook inside Gatsby and Typescript project

Question

I created a custom React hook in my Gatsby (and Typescript) project for my Site Metadata:

// hooks/useSiteMetadata.ts
import { useStaticQuery, graphql } from 'gatsby';

const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            title
            description
            author
            year
          }
        }
      }
    `,
  );
  return site.siteMetadata;
};

export default useSiteMetadata;

Inside e.g. Header.tsx I use it like:

const { title } = useSiteMetaData();

Below my header component:

const Header: FC<Props> = () => {
  const styles = Styles();
  const { title } = useSiteMetaData();

  return (
    <header css={styles.root}>
      <Logo siteTitle={title} />
    </header>
  );
};

export default Header;

To generate types for my graphql queries, I am using Gatsby plugin Gatsby Typescript Graphql Codegen.

It generates a file graphql-types.ts. From this file I can import my graphql queries:

import { SiteMetaDataQuery } from '../../graphql-types'

In my custom hook, I try to use it like:

const useSiteMetadata = () => {
  const { site }: SiteMetaDataQuery = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            title
            description
            author
            year
          }
        }
      }
    `,
  );
  return site?.siteMetadata;
};

But then inside Header.tsx (where I use the hook), I get the following error:

Property 'title' does not exist on type 'Maybe<Pick<SiteSiteMetadata, "title" | "description" | "author" | "year">> | undefined'