Why does the graphql codegen generated graphql function have an unknown type?

I am trying to leverage GraphQL code-gen for my React application (typescript, apollo). This is what the config object looks like in my codegen file:

const config: CodegenConfig = {
  overwrite: true,
  schema: path.join(__dirname, "./schema.graphql"),
  documents: ["src/**/*.tsx", "src/**/*.ts"], // All queries are under "src/queries/*.ts". 
  generates: {
    "src/queries/__generated__/": {
      preset: "client",
      plugins: ["typescript"],
    },
    "./graphql.schema.json": {
      plugins: ["introspection"],
    },
  },
};

This generates the anticipated files including the gql file. There are 14 queries in total, and thus the gql file has 14 overloads for the generated graphql function. However, the very first graphql function definition looks like this:

 *
 * The query argument is unknown!
 * Please regenerate the types.
 */
export function graphql(source: string): unknown;

{...14 other graphql function overloads }

As the comment indicates, the original has a type unknown. I am not able to use this, because Apollo's useQuery hooks complain about a type mismatch and suggest: Argument of type 'unknown' is not assignable to parameter of type 'DocumentNode | TypedDocumentNode<any, {...queryVariables }>'..

What am I doing wrong here? An arbitrary example of how my queries have been written is listed below:

import { graphql } from "./__generated__"; 
export const GET_DATA = graphql(`
  query getData($Criteria: CriteriaInputType) {
    dataSet(criteria: $Criteria) {
          pagedResult {
              ...FragmentTypeA
              ...FragmentTypeB
          }
    },
    validations {
      key
      value
    }
  }
  ...FragmentTypeA,
  ...FragmentTypeB
`);