I get that error {type: 'IMPROPER_MEETING_STATE', reason: 'closed'}

Meeting SDK
1

that is my full code

import React, { useEffect, useState } from “react”;
import ZoomMtgEmbedded from “@zoom/meetingsdk/embedded”;
import ClassRating from “@/components/ClassRating”;
import { reviewClass } from “…/pages/api/services/book-a-class”;

function ZoomMeeting({ signature, meetingNumber, sdkKey, password, userName, coachId, classId }) {
const [rating, setRating] = useState(0);
const [isOpen, setIsOpen] = useState(false); // Start with the modal closed
const [review, setReview] = useState(“”);
const [loading, setLoading] = useState(false);

useEffect(() => {
const client = ZoomMtgEmbedded.createClient();

async function startMeeting() {
  let meetingSDKElement = document.getElementById("meetingSDKElement");

  try {
    await client.init({
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
    });

    client.on('user-leave', (data) => {
      console.log('User has left the meeting:', data);
      // Open the review modal when a user leaves the meeting
      if (data.role === 1) { // Optional: Check if the host leaves
        setIsOpen(true);
      }
    });

    client.on('leave', () => {
      console.log('User has left the meeting');
      // Open the review modal when the user leaves the meeting
      setIsOpen(true);
    });

    await client.join({
      signature: signature,
      sdkKey: sdkKey,
      meetingNumber: meetingNumber,
      password: password,
      userName: userName,
    });
    console.log('Joined successfully');
  } catch (error) {
    console.error('Error initializing or joining meeting:', error);
    if (error.type === 'IMPROPER_MEETING_STATE') {
      console.error('The meeting state is improper:', error.reason);
    }
  }
}

if (signature) {
  startMeeting();
}

// Cleanup event listeners when component unmounts
return () => {
  client.off('user-leave');
  client.off('leave');
};

}, [signature, meetingNumber, sdkKey, password, userName]);

const handleSubmit = async (event) => {
event.preventDefault();

try {
  setLoading(true);
  const payload = {
    coachId: coachId,
    classId: classId,
    rating: rating,
    reviewText: review,
  };
  const response = await reviewClass(payload);
  if (response.data.messageCode === 1041) {
    setIsOpen(false);
    // Optional: Handle success feedback
    // openSuccessModal({ title: "Success!", message: "Your review was submitted successfully!" });
  } else {
    console.error("Review submission failed: ", response.data.message);
  }
} catch (error) {
  console.error("Error submitting review: ", error);
} finally {
  setLoading(false);
}

};

return (


<div
style={{
display: ‘flex’,
alignItems: ‘center’,
justifyContent: ‘center’,
height: ‘200vh’,
width: ‘200vw’,
}}
>
<div id=“meetingSDKElement” style={{ width: ‘80%’, height: ‘80%’ }}>

  {/* Render the ClassRating modal component */}
  {isOpen && (
    <ClassRating
      setReview={setReview}
      setIsOpen={setIsOpen}
      isOpen={isOpen}
      setRating={setRating}
      rating={rating}
      submit={handleSubmit}
    />
  )}
</div>

);
}

export default ZoomMeeting;