Why am i getting the error: server must support graphql-ws or subscriptions-transport-ws protocol in Apollo studio

[CrispenGari]

I just copied and modified the example in the docs, intergrating express, apollo-server and with subscriptions but surprisingly I'm getting an error saying:

server must support graphql-ws or subscriptions-transport-ws protocol

This is happening in the Apollo Studio, where am i wrong. This is the code that i have on the server:

import "reflect-metadata";
import "dotenv/config";
import _ from "node-env-types";
import ip from "ip";
import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";
import { ApolloServerPluginDrainHttpServer } from "@apollo/server/plugin/drainHttpServer";
import { createServer } from "http";
import express from "express";
import { WebSocketServer } from "ws";
import { useServer } from "graphql-ws/lib/use/ws";
import { json } from "body-parser";
import cors from "cors";
import { Resolvers } from "./resolvers";
import { buildSchema } from "type-graphql";

_();
const PORT: any = process.env.PORT || 3001;

(async () => {
  const app = express();
  const httpServer = createServer(app);
  const schema = await buildSchema({
    resolvers: [...Resolvers] as any,
    validate: false,
  });

  const wsServer = new WebSocketServer({
    server: httpServer,
    path: "/graphql",
  });

  const serverCleanup = useServer({ schema }, wsServer);
  const server = new ApolloServer({
    schema,
    plugins: [
      ApolloServerPluginDrainHttpServer({ httpServer }),
      {
        async serverWillStart() {
          return {
            async drainServer() {
              await serverCleanup.dispose();
            },
          };
        },
      },
    ],
  });
  await server.start();

  app.use(
    "/graphql",
    cors<cors.CorsRequest>({
      origin: ["*", "https://studio.apollographql.com"],
    }),
    json(),
    expressMiddleware(server)
  );
  httpServer.listen(PORT, () => {
    console.log();
    console.log(`\t Local: http:127.0.0.1:${PORT}$/graphql`);
    console.log(`\t Network: http:${ip.address()}:${PORT}/graphql`);
    console.log();
    console.log(`Server is now running on http://localhost:${PORT}/graphql`);
  });
})();

[trevor-scheer]

I can't reproduce (using the runnable example here: https://www.apollographql.com/docs/apollo-server/data/subscriptions#basic-runnable-example) and it's not obvious to me where your implementation is different. Can you share a full reproduction that I can run locally?