Returning pubsub.asyncIterator not working

[HanlinTheDEVELOPER]

I am following along the tutorial on official about using Subscriptions. But I am getting this error saying

Internal error occurred during message handling. Please check your implementation. Error: Subscription field must return Async Iterable. Received: undefined."

Here is my code`

Server.ts

import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";
import { ApolloServerPluginDrainHttpServer } from "@apollo/server/plugin/drainHttpServer";
import { makeExecutableSchema } from "@graphql-tools/schema";
import cors from "cors";
import express from "express";
import { PubSub } from "graphql-subscriptions";
import { useServer } from "graphql-ws/lib/use/ws";
import http from "http";
import { WebSocketServer } from "ws";

import { PrismaClient } from "@prisma/client";
import resolvers from "./graphql/resolver";
import typeDefs from "./graphql/typeDefs";
import { getServerSession } from "./lib/getServerSession";
import { GraphQlContext, SubscriptionContext } from "./types/types";

const corsOption = {
  origin: "http://localhost:3000",
  credentials: true,
};

const main = async () => {
  const app = express();
  const httpServer = http.createServer(app);

  const schema = makeExecutableSchema({
    typeDefs,
    resolvers,
  });
  const prisma = new PrismaClient();
  const pubsub = new PubSub();
  // Creating the WebSocket server
  const wsServer = new WebSocketServer({
    // This is the `httpServer` we created in a previous step.
    server: httpServer,
    // Pass a different path here if app.use
    // serves expressMiddleware at a different path
    path: "/subscriptions",
  });

  // Hand in the schema we just created and have the
  // WebSocketServer start listening.
  const serverCleanup = useServer(
    {
      schema,
      context: async (ctx: SubscriptionContext): Promise<GraphQlContext> => {
        if (ctx.connectionParams && ctx.connectionParams.session) {
          const { session } = ctx.connectionParams;
          return { session, prisma, pubsub };
        }
        return { session: null, prisma, pubsub };
      },
    },
    wsServer
  );

  const server = new ApolloServer({
    schema,
    csrfPrevention: true,
    cache: "bounded",
    plugins: [
      ApolloServerPluginDrainHttpServer({ httpServer }),
      {
        async serverWillStart() {
          return {
            async drainServer() {
              await serverCleanup.dispose();
            },
          };
        },
      },
    ],
  });

  await server.start();
  app.use(
    "/",
    cors(corsOption),
    express.json(),
    expressMiddleware(server, {
      context: async ({ req, res }): Promise<GraphQlContext> => {
        const session = await getServerSession(req.headers.cookie as string);
        return { session, prisma, pubsub };
      },
    })
  );

  await new Promise<void>((resolve) =>
    httpServer.listen({ port: 4000 }, resolve)
  );
  console.log(`🚀 Server ready at http://localhost:4000/`);
};

main();

Mutation and Subscription part in resolver.ts

 Mutation: {
    createConversation: async (
      _: any,
      args: { participantIds: string[] },
      context: GraphQlContext
    ) => {
      const { session, prisma, pubsub } = context;
      const { participantIds } = args;
      const userId = session?.user.id;

      if (!session) new GraphQLError("Not Authorized");

      try {
        const conversation = await prisma.conversation.create({
          data: {
            participants: {
              createMany: {
                data: participantIds.map((id) => ({
                  userId: id,
                  hasSeenLastMessage: id === userId,
                })),
              },
            },
          },
          include: conversationPopulate,
        });
        pubsub.publish("CONVERSATION_CREATED", {
          conversationCreated: conversation,
        });

        return { conversationId: conversation.id };
      } catch (error: any) {
        throw new GraphQLError(error?.message);
      }
    },
  },
  Subscription: {
    conversationCreated: {
      subsrcibe: (_: any, __: any, { pubsub }: GraphQlContext) => {
        return pubsub.asyncIterator(["CONVERSATION_CREATED"]);
      },
    },
  },

And I don’t think it’s relate but this is what is showing in front end browser