Issue with `getGatsbyImageData` function when using `gatsby-source-sanity` and `gatsby-plugin-image`

import React from 'react'
import {getGatsbyImageData} from 'gatsby-source-sanity'
import {GatsbyImage} from 'gatsby-plugin-image'

const sanityConfig = {projectId: 'abc123', dataset: 'blog'}

const Person = ({data}) => {
  const imageData = getGatsbyImageData(data.sanityPerson.profileImage.asset, {maxWidth: 700}, sanityConfig)
  return (
    <article>
      <h2>{data.sanityPerson.name}</h2>
      <GatsbyImage image={imageData}/>
    </article>
  )
}

export default Person

export const query = graphql`
  query PersonQuery {
    sanityPerson {
      name
      profileImage {
        asset
      }
    }
  }
`

GraphQLError: Field "asset" of type "SanityImageAsset" must have a selection of subfields. Did you mean "asset { ... }"?

can't access property "split", id is undefined