NestJS : Not able to use Apollo Studio Explorer

Question

I'm trying to use Apollo Studio Explorer with NestJS graphql (express server). I'm adding ApolloServerPluginLandingPageLocalDefault in the plugins array of GraphQLModule.

It fails with this exception:

error TS2322: Type 'ApolloServerPlugin<BaseContext>' is not assignable to type 'ApolloServerPlugin<any>'.
  Types of property 'serverWillStart' are incompatible.
    Type '(service: GraphQLServiceContext) => Promise<void | GraphQLServerListener>' is not assignable to type '(service: GraphQLServerContext) => Promise<void | GraphQLServerListener>'.
      Types of parameters 'service' and 'service' are incompatible.
        Type 'GraphQLServerContext' is missing the following properties from type 'GraphQLServiceContext': schemaHash, serverlessFramework

43       plugins: [ApolloServerPluginLandingPageLocalDefault()],

This is how I configured it in the code -

import { Module } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { TypeOrmModule, TypeOrmModuleAsyncOptions } from '@nestjs/typeorm';
import { join } from 'path';
import { ApolloServerPluginLandingPageLocalDefault } from 'apollo-server-core';

@Module({
  imports: [
    ConfigModule.forRoot({
      envFilePath: '.env',
    }),
    TypeOrmModule.forRootAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: (configService: ConfigService) => {
        return {
          type: 'postgres',
          logging: true,
          host: configService.get('DB_HOST'),
          port: +configService.get<number>('DB_PORT'),
          username: configService.get('DB_USERNAME'),
          password: configService.get('DB_PASSWORD'),
          database: configService.get('DB_NAME'),
          entities: [join(__dirname, '**', '*.entity.{ts,js}')],
          synchronize: true,
        } as TypeOrmModuleAsyncOptions;
      },
    }),
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      playground: true,
      typePaths: ['./**/*.graphql'],
      context: ({ req }) => ({ headers: req.headers }),
      definitions: {
        path: join(process.cwd(), 'src/graphql.schema.ts'),
        outputAs: 'class',
      },
      plugins: [ApolloServerPluginLandingPageLocalDefault()],
    })
  ],
  controllers: [],
  providers: [],
})
export class DomainModule {}

NestJS details-

| \ | |           | |    |_  |/  ___|/  __ \| |   |_   _|
|  \| |  ___  ___ | |_     | |\ `--. | /  \/| |     | |
| . ` | / _ \/ __|| __|    | | `--. \| |    | |     | |
| |\  ||  __/\__ \| |_ /\__/ //\__/ /| \__/\| |_____| |_
\_| \_/ \___||___/ \__|\____/ \____/  \____/\_____/\___/


[System Information]
OS Version     : macOS Unknown
NodeJS Version : v16.15.0
NPM Version    : 8.5.5 

[Nest CLI]
Nest CLI Version : 9.4.0 

[Nest Platform Information]
devtools-integration version : 0.1.4
platform-express version     : 9.4.0
schematics version           : 9.1.0
graphql version              : 11.0.5
typeorm version              : 9.0.1
testing version              : 9.4.0
apollo version               : 11.0.5
common version               : 9.4.0
config version               : 2.3.1
core version                 : 9.4.0
cli version                  : 9.4.0

Is there anything missing here? I think it was working fine until @nestjs/apollo version ^10.0.2 whereas I'm using 11.0.5.