ReferenceError: self is not defined

[banjare1990 (SUNIL)]

I am not able to upload screenshots here due to company laptop policies, but have added terminal error that I am facing from long time
^
ReferenceError: self is not defined
at Object. (C:\sgp\mh-29-03\sailgp-mediahub\node_modules@zoomus\websdk\dist\zoomus-websdk-embedded.umd.min.js:2:332)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object. (C:\sgp\mh-29-03\sailgp-mediahub\node_modules@zoomus\websdk\embedded.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)

Implementing this on React jS components with 16.8.4 version node 14.18.1 version

Which Web Meeting SDK version?
2.11

Device (please complete the following information):

• Device: Window OS
• OS: Window 10
• Browser: Chrome
• Browser Version : Version 109.0.5414.120 (Official Build) (64-bit)

My components code

import React from ‘react’;
import ZoomMtgEmbedded from ‘@zoomus/websdk/embedded’;
import PropTypes from ‘prop-types’;
import { Cell, Row } from ‘…/Grid’;
import ‘./zoom.scss’;
import { fetchPostData } from ‘…/…/utils/fetchApi’;
import { fetchPageData } from ‘…/…/utils/fetchApiData’;

function Zoom(props) {
const client = ZoomMtgEmbedded.createClient();
const { contentfulData, zoomMeetingNumber, password } = props;
const sdkKey = ‘uBJi1sIkkqBCpB52u7SMlDESRhaxn223HspN’
const meetingNumber = zoomMeetingNumber
const passWord = password
const userName = typeof window !== ‘undefined’ && window.sessionStorage && JSON.parse(sessionStorage.userDetails).firstName
const userEmail = typeof window !== ‘undefined’ && window.sessionStorage && JSON.parse(sessionStorage.userDetails).email
const zakToken = ‘’

function getSignature(e) {
	e.preventDefault();
	const getZoomMeetingAPIURL = fetchPageData(`event/zoomSignature`);
	getZoomMeetingAPIURL.then(url => {
		const zoomPayLoadBody = {
			meetingNumber: meetingNumber,
			role: 0
		};
		const getZoomData = fetchPostData(url, 'POST', zoomPayLoadBody, true);
		getZoomData
			.then(res => res.json())
			.then(response => {
				startMeeting(response.data)
			}).catch(error => {
				console.error(error)
			})
	})
}

function startMeeting(signature) {
	let meetingSDKElement = document.getElementById('meetingSDKElement');
	client.init({
		debug: true,
		zoomAppRoot: meetingSDKElement,
		language: 'en-US',
		customize: {
			meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
		}
	});

	client.join({
		signature: signature,
		sdkKey: sdkKey,
		meetingNumber: meetingNumber,
		password: passWord,
		userName: userName,
		userEmail: userEmail,
		zak: zakToken
	})
}

return (
	<Row>
		<Cell lgCols={12} mdCols={6} smCols={2}>
			<div id="meetingSDKElement"></div>
			<button onClick={getSignature}>{contentfulData.joinmeeting}</button>
		</Cell>
	</Row>
);

}

export default Zoom;

Zoom.propTypes = {
contentfulData: PropTypes.object,
joinMeeting: PropTypes.func,
zoomMeetingNumber: PropTypes.number,
password: PropTypes.string
};