GraphQL useSubscription is not working with graphql-js in NextJS

Question

I am trying to implement Websocket using apollo client GraphQLWsLink. Which is not at emitting the data. However the Websocket connect is alive only. What I observed from the network tab is the query is not at all passed in the payload while using the

GraphQLWsLink

But at the same time when I try implement with

subscriptions-transport-ws 

this is working fine.

Apollo Client.js

import { split, HttpLink, ApolloClient, InMemoryCache } from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { GraphQLWsLink } from "@apollo/client/link/subscriptions";
import { createClient } from "graphql-ws";

const httpLink = new HttpLink({
  uri: process.env.NEXT_PUBLIC_GRAPHQL_API_URL,
});

const wsLink = () =>
  new GraphQLWsLink(
    createClient({
      url: process.env.NEXT_PUBLIC_GRAPHQL_SOCKET_URL,
      shouldRetry: true,
      connectionParams: () => {
        return {
          Authorization: `Bearer session.token`,
        };
      },
      on: {
        closed: () => console.log("CLOSED"),
        ping: () => console.log("ping"),
        pong: () => console.log("pong"),
        connected: () => console.log("connected"),
        connecting: () => console.log("connecting"),
        error: () => console.log("error"),
        message: () => console.log("message"),
        opened: () => console.log("opened"),
      },
    })
  );
const splitLink =
  typeof window !== "undefined"
    ? split(
        ({ query }) => {
          const definition = getMainDefinition(query);
          return (
            definition.kind === "OperationDefinition" &&
            definition.operation === "subscription"
          );
        },
        wsLink(),
        httpLink
      )
    : httpLink;

export const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});

_app.js

import {ApolloProvider} from "@apollo/client"
import {client} from "hooks/useApolloClient"

const MyApp = ({Component, pageProps}) => {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}
export default MyApp

Page Where I have implemented the useSubscription Hook

import { useSubscription, gql } from "@apollo/client";

const SUBSCRIPTION_ADD_COMMENT = gql`
  subscription CommentAdded {
    commentAdded {
      id
      content
      author {
        user {
          firstName
        }
      }
    }
  }
`;

const TestSubscription = () => {
  useSubscription(SUBSCRIPTION_ADD_COMMENT, {
    onComplete: () => console.log(">>>>>>>>>>> Subscription onCOmplete"),
    onData: ({ data }) => console.log(">>>>>>>>>>> Subscription onData", data),
    onError: () => console.log(">>>>>>>>>>> Subscription onError"),
  });

  return (
    <div>
      {/* <h1>{loading ? "LOADING" : "ENDED"}</h1>
      <h1>{data ? JSON.stringify(data) : "NO DATA"}</h1>
      <h1>{error ? JSON.stringify(error) : "NO Error"}</h1> */}
    </div>
  );
};

export default TestSubscription;

But the same Subscription is working fine when I try with below Client configuration

import { split, HttpLink, ApolloClient, InMemoryCache } from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { WebSocketLink } from "@apollo/client/link/ws";
import { SubscriptionClient } from "subscriptions-transport-ws";

const httpLink = new HttpLink({
  uri: process.env.NEXT_PUBLIC_GRAPHQL_API_URL,
});

const wsLink = () =>
  new WebSocketLink(
    new SubscriptionClient(process.env.NEXT_PUBLIC_GRAPHQL_SOCKET_URL, {
      reconnect: true,
    })
  );
const splitLink =
  typeof window !== "undefined"
    ? split(
        ({ query }) => {
          const definition = getMainDefinition(query);
          return (
            definition.kind === "OperationDefinition" &&
            definition.operation === "subscription"
          );
        },
        wsLink(),
        httpLink
      )
    : httpLink;

export const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});

But @apollo/client is strongly advising not to use subscriptions-transport-ws. Should use graphql-ws Which is not working. Please help what is missing here in the configuration