React useEffect: help to solving 'object object' Error with Zoom SDK Integration?

Question

I have implemented a React component utilizing the Zoom SDK for meeting integration. However, I am encountering an 'object object' error in my useEffect. I suspect the issue may be related to how I am handling the payload object, but I'm not sure where the problem lies. The error arises when attempting to initialize the Zoom meeting.

import React, { useEffect, Fragment,useContext } from "react";

const Meeting = () => {
  
  
  const payload = {
    meetingNumber: "",
    role:0,
    sdkKey:'',
    sdkSecret:'',
    passWord: "",
    
>! userName:"test",
    userEmail: "",
    leaveUrl: "",
  };

  useEffect(() => {
    const initializeMeeting = async () => {
      try {
        const { ZoomMtg } = await import("@zoomus/websdk");
        
        ZoomMtg.setZoomJSLib('https://source.zoom.us/2.17.0/lib', '/av');
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareWebSDK();
        
        ZoomMtg.generateSDKSignature({
          meetingNumber: payload.meetingNumber,
          role: payload.role,
          sdkKey: payload.sdkKey,
          sdkSecret: payload.sdkSecret,
          success: function (signature) {
            ZoomMtg.init({
              leaveUrl: payload.leaveUrl,
              success: function (data) {
                ZoomMtg.join({
                  meetingNumber: payload.meetingNumber,
                  signature: signature.result,
                  sdkKey: payload.sdkKey,
                  userName: payload.userName,
                  userEmail: payload.userEmail,
                  passWord: payload.passWord,
                  tk: "",
                  success: function () {
                    console.log("-- joined --");
                  },
                  error: function (joinError) {
                    console.error("Error joining meeting:", joinError);
                  },
                });
              },
              error: function (initError) {
                console.error("Error initializing Zoom:", initError);
              },
            });
          },
          error: function (signError) {
            console.error("Error generating SDK signature:", signError);
          },
        });
      } catch (error) {
        console.error("Error while initializing Zoom:", error);
      }
    };

    initializeMeeting();
  }, [payload.meetingNumber, payload.role, payload.sdkKey, payload.sdkSecret, payload.passWord, payload.userName, payload.userEmail, payload.leaveUrl]);

  return (
    <Fragment>
     
     
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.17.0/css/bootstrap.css" />
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.17.0/css/react-select.css" />

    </Fragment>
    
  );
};

export default Meeting;
# ```