TypeError: Cannot destructure property ‘formatMessage’ of ‘this.languageManager’ as it is undefined when sending a call invitation using ZEGOCLOUD

Problem Description: I am developing a video calling feature using the ZEGOCLOUD SDK in my React application. However, when I attempt to send a call invitation, I encounter the following error:
TypeError: Cannot destructure property ‘formatMessage’ of ‘this.languageManager’ as it is undefined.
This error occurs within the sendCallInvitation method. I have checked my configuration and ensured that all variables are set correctly, but I am still uncertain about the cause of this issue.
Relevant Code: Here’s the relevant section of my code:

import { useClerk } from '@clerk/clerk-react';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

// Function to get URL parameters
export function getUrlParams(
  url: string = window.location.href
): URLSearchParams {
  const urlStr = url.split("?")[1];
  return new URLSearchParams(urlStr);
}

const Header = ({ imageUrl, name, options }) => {
  const { user } = useClerk();
  const roomID = getUrlParams().get("roomID") || randomID(5); // Generate room ID

  const handleVideoCall = async () => {
    try {
      const response = await fetch(`/api/zegocloud?userID=${user?.id}`);
      const { token, appID } = await response.json();
      const username =
        user?.fullName || user?.emailAddresses[0].emailAddress.split("@")[0];

      // Generate kit token for ZEGOCLOUD
      const kitToken = ZegoUIKitPrebuilt.generateKitTokenForProduction(
        appID,
        token,
        roomID,
        user?.id!,
        username
      );

      const zp = ZegoUIKitPrebuilt.create(kitToken);
      zp.addPlugins({ ZIM });

      const targetUser = {
        userID: user?.id!,  // The target user ID
        userName: username,  // The target user name
      };

      // Sending the call invitation
      await zp.sendCallInvitation({
        callees: [targetUser],
        callType: ZegoUIKitPrebuilt.InvitationTypeVideoCall,
        timeout: 60, // Timeout duration (seconds)
      });

      console.log("Call invitation sent successfully");
    } catch (err) {
      console.error("Error in video call:", err);
    }
  };

  return (
    <Card className="w-full flex rounded-lg items-center p-2 justify-between">
      <div className="flex items-center gap-2">
        <Link href="/conversations" className="block lg:hidden">
          <CircleArrowLeft />
        </Link>
        <Avatar className="h-8 w-8">
          <AvatarImage src={imageUrl} />
          <AvatarFallback>{name.substring(0, 1)}</AvatarFallback>
        </Avatar>
        <h2 className="font-semibold">{name}</h2>
      </div>
      <div className="flex gap-2">
        <Button id="videoCall" size="icon" variant="secondary" onClick={handleVideoCall}>
          <Video />
        </Button>
        {options ? (
          <DropdownMenu>
            <DropdownMenuTrigger>
              <Button size="icon" variant="secondary">
                <Settings />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              {options.map((option, id) => (
                <DropdownMenuItem
                  key={id}
                  onClick={option.onClick}
                  className={cn("font-semibold", {
                    "text-destructive": option.destructive,
                  })}
                >
                  {option.label}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        ) : null}
      </div>
    </Card>
  );
};