zoom does not work with next js 15

[ahmed_anter]

I am experiencing an issue with the Zoom Web SDK in my Next.js application. Upon initializing the Zoom meeting, the application displays a black screen.any help or starter kit for next js 15 ?
--------------------------------------------------------------
this is my console 
[Fast Refresh] rebuilding
zoomus-websdk.umd.min.js:2 success load webim
zoomus-websdk.umd.min.js:2 success load jsmedia
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/3.10.0/lib/av/audio.simd.wasm
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/3.10.0/lib/av/video.mtsimd.wasm
4
-------------------------------

"dependencies": {

"@zoom/meetingsdk": "^3.10.0",

"next": "15.1.3",

"react": "^19.0.0",

"react-dom": "^19.0.0"

},
-------------------------

"use client";
import "./App.css";
import React, { useEffect, useState } from "react";
import Script from "next/script";
import "@zoom/meetingsdk/dist/css/bootstrap.css";
import "@zoom/meetingsdk/dist/css/react-select.css";

function Welcome() {
  const [ZoomMtg, setZoomMtg] = useState<any>(null);

  const authEndpoint = ""; // Replace with your endpoint
  const sdkKey = ""; // Replace with your Zoom SDK Key
  const meetingNumber = ""; // Replace with your meeting number
  const passWord = ""; // Replace with your meeting password
  const role = 0; // 0 = Attendee, 1 = Host
  const userName = "React";
  const leaveUrl = "http://localhost:3000"; // Redirect after leaving the meeting

  useEffect(() => {
    import("@zoom/meetingsdk")
      .then(({ ZoomMtg }) => {
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareWebSDK();
        setZoomMtg(ZoomMtg);
      })
      .catch((error) => console.error("Zoom SDK Error:", error));
  }, []);

  const getSignature = async () => {
    if (!ZoomMtg) return;
    try {
      const response = await fetch(authEndpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ meetingNumber, role }),
      });
      const data = await response.json();
      startMeeting(data.signature);
    } catch (error) {
      console.error("Error fetching signature:", error);
    }
  };

  const startMeeting = (signature: string) => {
    if (!ZoomMtg) return;

    document.getElementById("zmmtg-root")!.style.display = "block";

    ZoomMtg.init({
      leaveUrl,
      success: () => {
        ZoomMtg.join({
          signature,
          sdkKey,
          meetingNumber,
          passWord,
          userName,
          success: (success: unknown) => console.log("Joined:", success),
          error: (error: unknown) => console.error("Join Error:", error),
        });
      },
      error: (error: unknown) => console.error("Init Error:", error),
    });
  };

  return (
    <>
      <Script
        src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
        strategy="beforeInteractive"
      />
      <div>
        <div id="zmmtg-root"></div>
        <div id="aria-notify-area"></div>
        <main>
          <h1>Zoom Meeting</h1>
          <button onClick={getSignature}>Join Meeting</button>
        </main>
      </div>
    </>
  );
}

export default Welcome;