Context Menu Event

import React, { useState } from "react";
import { MouseEventParams, ICraftPlayer } from "@icraft/player-react";
 
export default () => {
  const [contextMenu, setContextMenu] = useState<string>();
  const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
 
  const onContextMenu = (e: MouseEventParams) => {
    const { instance: element, event, data } = e;
    setContextMenu(data?.name || "");
    setPosition({
      x: event.offsetX,
      y: event.offsetY,
    });
  };
 
  return (
    <div style={style}>
      <ICraftPlayer
        src='/templates/AWSCloud.iplayer'
        onContextMenu={onContextMenu}
      />
      {position && (
        <div style={{ ...textStyle, top: position.y, left: position.x }}>
          ContextMenu: {contextMenu}
        </div>
      )}
    </div>
  );
};
 
const style = {
  width: "100%",
  height: "100%",
  position: "relative" as const,
  overflow: "hidden" as const,
};
 
const textStyle = {
  position: "absolute" as const,
  pointerEvents: "none" as const,
  backgroundColor: "rgba(0, 0, 0, 0.5)",
  color: "white",
  padding: "5px 10px",
  borderRadius: "5px",
  width: "fit-content",
  height: "fit-content",
  zIndex: 1000,
};

interface MouseEventParams {
  instance: Element3D | null;
  event: MouseEvent;
  data: OptionsType | null;
}