URQL WSS connection with GraphQL-WS says error 4500

Question

import {
  createClient,
  defaultExchanges,dedupExchange, cacheExchange, fetchExchange,
  subscriptionExchange,
  gql
} from "@urql/core";

import { createClient as createWSClient } from "graphql-ws";
import { pipe, subscribe } from "wonka";
import { getToken, setToken } from "./helper";

const wsClient = createWSClient({
  url: 'wss://**********/subscriptions',
  reconnect: true,
});

const client = createClient({
  url: "https://***********/",
  fetchOptions: () => {
    const token = getToken()
    return token ? { headers: { authorization: `Bearer "${token}"` } } : {}
    },
  // the default:
  exchanges: [
    ...defaultExchanges,
    subscriptionExchange({
      forwardSubscription(operation) {
        return {
          subscribe: (sink) => {
            const dispose = wsClient.subscribe(operation, sink);
            return {
              unsubscribe: dispose,
            };
          },
        };
      },
    }),
  ]
});



SUB_TO_MESSAGES = async () => {
    console.log('sub')
    const token = getToken();
    console.log(String(token))
      const { unsubscribe } = pipe(
      await client.subscription(messageAdded,{ jwt: token }),
        subscribe((result) => {
          console.log(result)
        })

    )
  };

I dont get the same issue with try and catch using GraphQL-WS but I still dont get any data from the server. The assignment is a vanillaJS project using GraphQL.I didndt post the url, jwt token,or the GET, POST, REgG as they work as intended. The rendering is done with a proxy. The error message is:

Connection Closed: 4500 Cannot read properties of undefined (reading 'Authorization')

Even playground doesnt work. Something wrong with the endpoint. It worked 2 weeks ago but admin says it still work yet I can find the problem. It used to work for me.

Here is the try and catch version:

import { createClient} from "graphql-ws";
import pStore from "./handler.js";
import { getToken } from "./helper";

const client = createClient({
    url: "wss://******/subscriptions",
    reconnect: true,
    connectionParams:{
      headers: {
        "Authorization":`Bearer ${getToken()}`
      }
    },
})

async SUB_MESSAGE() {
    try {
      console.log('called Gql server')
      
      const onNext = (res) => {
        let obj = res.data.messageAdded
        console.log(obj)
        pStore[obj.id] = obj
        pStore.render(obj)
        
      };
      let unsubscribe = () => {
        /* complete the subscription */
      };
      new Promise((resolve, reject) => {
        client.subscribe({
          query: `subscription{messageAdded(jwt:"${getToken()}"){id text fromAgent createdAt updatedAt}}`,
          },
          {
          next: (data)=> onNext(data),
          error: reject,
          complete: () => resolve(true),
        })
      })
    }catch(error){
      console.error('There has been a problem with your ws operation:', error);
    }
  }

Either way I think its a ad character, scope issue but I dont know where.