Trying to fetch owner created data from Amplify GraphQL from NextJS React App

This is my first ever Stack overflow question and I’m a pretty new programmer.

I can’t figure out how to do a basic fetch from the API on Amplify based on the user being logged using Authenticator and reading the data that they are the owner of.

I’m getting the error "Variable ‘id’ has coerced Null value for NonNull type ‘ID!’"

Here is my model.

type userProfile
  @model
  @auth(
    rules: [
      {
        allow: owner
        operations: [create, read, update]
        provider: userPools
        ownerField: "owner"
      }
    ]
  ) {
  id: ID!
  firstName: String!
  lastName: String!
  email: AWSEmail!
  phone: AWSPhone!
  address: String!
  city: String!
  state: String!
  country: String!
  postalCode: String!
}

You can see the query works on AWS Appsync
screenshot of API query

This is what my querie looks like in the queries.ts file:

export const getUserProfile = /* GraphQL */ `
  query GetUserProfile($id: ID!) {
    getUserProfile(id: $id) {
      id
      firstName
      lastName
      email
      phone
      address
      city
      state
      country
      postalCode
      createdAt
      updatedAt
      owner
      __typename
    }
  }
;

And here is what I’ve written as my fetch:

async function fetchUser() {
    try {
      const userData = await API.graphql({
        query: getUserProfile,
        variables: {
          getUserProfile(id: "ID_GOES_HERE") {
            email
          }
        }
      });
      const user = userData;
      console.log(user);
      //setUserProfile(user);
    } catch (error) {
      console.log ("Error fetching users ", error);
    }
  }  

I found creating the userProfile super straight forward but pulling the data totally eludes me and I can’t interpret the AWS docs very well yet.