TypeError: Cannot read properties of undefined (reading 'QUERY')\n

I have defined my directives.graphql and have below code

scalar DateTime
scalar JSON
scalar FieldSet

type _Service {
  sdl: String!
}

extend type Query {
  _service: _Service!
}

directive @key(
  fields: FieldSet!
  resolvable: Boolean = true
) repeatable on OBJECT | INTERFACE

and Users.graphql has below type defined

type SocialMedia @key(fields: "id") {
  id: ID
  name: String
}

and when i start the server it gives me the error defined in title

my apollo config is

import { ApolloError, ValidationError } from 'apollo-server-errors';
import { GraphQLError } from 'graphql';
import logger from 'logger';
import typeDefs from '../src/graphql/schema';
import RESOLVERS from '../src/resolvers';
import { buildSubgraphSchema } from '@apollo/subgraph';

export default {
  schema: buildSubgraphSchema([{ typeDefs: typeDefs, resolvers: RESOLVERS }]),
  formatError: (error) => {
    if (
      error.originalError instanceof ApolloError ||
      error instanceof ValidationError
    ) {
      return error;
    }

    logger.error(error);

    return new GraphQLError(error);
  },
  context: ({ req }) => {
    return {
      userId: req.headers?.['x-user-id'],
      whiteLabelEmail: req.headers?.['x-white-label-email'],
      ip: req.headers?.['x-ip'],
    };
  },
};

Dependencies being utilised

  "@apollo/server": "^4.11.0",
   "@apollo/subgraph": "^2.9.0"