Subscribing to Azure Pub Sub web service from react causes Unhandled Rejection (TypeError) – Reactjs

Based on the official documentation, i am able to get the subscribed messages. When i simply run the javascript code, it runs without any error.

const WebSocket = require('ws');
const { WebPubSubServiceClient } = require('@azure/web-pubsub');

async function main() {
  const hub = "hub1";
  let service = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);
  let token = await service.getClientAccessToken();
  let ws = new WebSocket(token.url);
  ws.on('open', () => console.log('connected'));
  ws.on('message', data => console.log('Message received: %s', data));
}

main();

But when i try to do this within React class’s, componentDidMount() function, facing error.

import React from "react";

// == Azure WebPuSub
// import { WebPubSubServiceClient } from '@azure/web-pubsub';
// import { WebSocket } from 'ws';
const { WebPubSubServiceClient } = require('@azure/web-pubsub');
const WebSocket = require('ws');


class AzurePubSubTest extends React.Component {

    constructor(_props, _context) {
        super(_props, _context);
        this.connectToPubSub = this.connectToPubSub.bind(this);
        this.state = {
        }
    }

    async componentDidMount() {
        console.log("===Mounting....")
        await this.connectToPubSub();
    }

    componentWillUnmount() {
        console.log("Unmounting....")
    }

    async connectToPubSub() {
        const hub = "hub1";
        let endpoint;
        // endpoint = process.env.WebPubSubConnectionString;
        endpoint = "Endpoint=https://***check.webpubsub.azure.com;AccessKey=***;Version=1.0;"
        // endpoint = "wss://***check.webpubsub.azure.com/client/hubs/Hub?access_token=***"; 
        console.log("process.env.WebPubSubConnectionString");
        console.log(endpoint);

        let service = new WebPubSubServiceClient(endpoint, hub);
        let token = await service.getClientAccessToken();
        let ws = new WebSocket(token.url);
        ws.on('open', () => console.log('connected'));
        ws.on('message', data => console.log('Message received: %s', data));

    }

    render() {
        const user = { username: "Check" };
        let testMessages = [];
        if (testMessages === undefined || testMessages === null) {
            testMessages = [];
        }

        return (
            <div>Testing....</div>
        )
    }
}


export default AzurePubSubTest;

× Unhandled Rejection (TypeError): Right-hand side of ‘instanceof’ is
not an object

Stacktrace 1

Stacktrace 2

Stacktrace 3