Share Screen not working in React

[vietnguyen97]

import React from "react";
import AgoraRTC from "agora-rtc-sdk-ng";

var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
var localTracks = {
  videoTrack: null,
  audioTrack: null,
};

let options = {
  appId: "2d265eac4ca3480688a95fa45278a645",
  channel: "DOCOSAN_VIDEO_735281632364294",
  token:
    "0062d265eac4ca3480688a95fa45278a645IABnyhOMybuPoP3yZIZgd6kvVd65GVx7R0HubfqfbcdAeICcvFarf75cIgBvv08B5wZlYQQAAQAAAAAAAwAAAAAAAgAAAAAABAAAAAAA",
  uid: 101371652,
`};`
var remoteUsers = {};
function App() {
  const handleShare = async () => {
    await joinShare();
  };
  const joinShare = async () => {
    try {
      client.on("user-published", handleUserPublished);
      client.on("user-unpublished", handleUserUnpublished);
      debugger;
      [options.uid, localTracks.audioTrack, localTracks.videoTrack] =
        await Promise.all([
          client.join(
            options.appid,
            options.channel,
            options.token || null,
            options.uid || null
          ),
          AgoraRTC.createMicrophoneAudioTrack(),
          AgoraRTC.createScreenVideoTrack(),
        ]);
      localTracks.videoTrack.play("local-player");
      document
        .getElementById("local-player-name")
        .textContent(`localVideo(${options.uid})`);
      await client.publish(Object.values(localTracks));
      console.log("publish success");
    } catch (error) {
      console.log("error");
    }
  };
  const handleUserPublished = (user, mediaType) => {
    const id = user.uid;
    remoteUsers[id] = user;
    subscribe(user, mediaType);
  };
  const subscribe = async (user, mediaType) => {
    const uid = user.uid;
    await client.subscribe(user, mediaType);
    console.log("subscribe success");
    if (mediaType === "video") {
      const player = `
        <div id="player-wrapper-${uid}">
          <p class="player-name">remoteUser(${uid})</p>
          <div id="player-${uid}" class="player"></div>
        </div>
      `;
      document.getElementById("remote-playerlist").append(player);
      user.videoTrack.play(`player-${uid}`);
    }
    if (mediaType === "audio") {
      user.audioTrack.play();
    }
  };
  function handleUserUnpublished(user) {
    const id = user.uid;
    delete remoteUsers[id];
    document.getElementById(`player-wrapper-${id}`).remove();
  }
  return (
    <div className="App">
      <h2 className="left-align">Agora Video Web SDK Quickstart</h2>
      <div className="row">
        <div>
          <button type="button" id="leave" onClick={handleShare}>
            SHARE
          </button>
        </div>
      </div>
      <div className="row video-group">
        <div className="col">
          <p id="local-player-name" className="player-name"></p>
          <div id="local-player" className="player"></div>
        </div>
        <div className="w-100"></div>
        <div className="col">
          <div id="remote-playerlist"></div>
        </div>
      </div>
    </div>
  );
}

export default App;

This is my code I using agora-rtc-sdk-ng version 4.4.0 when i replace the parameters(token, uid, channel) with the example code it works, but it doesn't work with my code I think have issues with version I using