`ApolloServerOptions<TContext>` is not assignable

the title is bit vague, not sure what is the exact source of the issue

I am trying to migrate the apollo server from v3 to v4, the dev server seems to be working fine without any runtime errors (related to apollo server).

But when I run tsc it throw this type error:

../../node_modules/.pnpm/@apollo+server@4.12.2_graphql@16.11.0/node_modules/@apollo/server/src/ApolloServer.ts:257:53 - error TS2345: Argument of type 'ApolloServerOptions<TContext>' is not assignable to parameter of type 'ApolloServerOptionsWithStaticSchema<TContext>'.
  Type 'ApolloServerOptionsWithGateway<TContext>' is not assignable to type 'ApolloServerOptionsWithStaticSchema<TContext>'.
    Type 'ApolloServerOptionsWithGateway<TContext>' is not assignable to type 'ApolloServerOptionsWithTypeDefs<TContext>'.
      Property 'typeDefs' is optional in type 'ApolloServerOptionsWithGateway<TContext>' but required in type 'ApolloServerOptionsWithTypeDefs<TContext>'.

257             apiSchema: ApolloServer.constructSchema(config),
                                                        ~~~~~~

../../node_modules/.pnpm/@apollo+server@4.12.2_graphql@16.11.0/node_modules/@apollo/server/src/ApolloServer.ts:1263:7 - error TS2322: Type 'string | DocumentNode' is not assignable to type 'string'.
  Type 'DocumentNode' is not assignable to type 'string'.

1263       query:
           ~~~~~

../../node_modules/.pnpm/@apollo+server@4.12.2_graphql@16.11.0/node_modules/@apollo/server/src/externalTypes/graphql.ts:19:3
    19   query?: string;
         ~~~~~
    The expected type comes from property 'query' which is declared here on type 'GraphQLRequest<VariableValues>'

Found 2 errors in the same file, starting at: ../../node_modules/.pnpm/@apollo+server@4.12.2_graphql@16.11.0/node_modules/@apollo/server/src/ApolloServer.ts:257

I’ve gone thought the migration guide already, but not sure what exactly I am missing here.

This is the code which init the apollo server

export const server = new ApolloServer<GraphQLContext>({
  schema: graphQLSchema,
  introspection: process.env.NODE_ENV !== 'production',
  validationRules: [
    depthLimit({
      maxDepth: 5,
    }),
  ],
  plugins: [complexityPlugin()],
  formatError: (error) => {
    return error;
  },
});

I’m using @graphql-tools/load pkg to read and load the *.graphql files

const graphqlTypes = loadSchemaSync(
  './src/modules/**/*.graphql',
  {
    loaders: [new GraphQLFileLoader()],
  },
);

const baseGraphQLSchema = addResolversToSchema({
  schema: graphqlTypes,
  resolvers,
});

Apollo/Server v4.12.2
Node.js v20