Component is getting refresh.

Actually, I am adding a hotspot at run time for tagging the object(TV, Freez etc), For that I am placing the hotspot icon at run time. and to do that I wrote the code in onMouseup evnet, it is working but, when new hotspot adds, pannellum is getting update also. I don't want pannellum to be updated.
here's my code.
import { Pannellum } from "pannellum-react";
import * as React from "react";
import {useEffect} from "react";
import scenesArray_ from "./ScenesArray"; 
import g from "./../../imageThreeSixty/g.png"; 
import Button from "../../../UploadButton/Button";
import { Scene } from "three";
import PhotoBasement_XM from './../../imageThreeSixty/360PhotoBasement_XM.JPG'
// import CustomForm from './form'

function PenneliumReactOne(props) {
  const [currentScene, setCurrentScene] = React.useState(0);
  const [imageID, setimageID] = React.useState(1);
  const [tagName, settagName] = React.useState(1);
  const [PannellumKey, setPannellumKey] = React.useState(1);
  const [scenesArray, setscenesArray] = React.useState({});
  const [isDataLoad, setisDataLoad] = React.useState(false);
  const [isHotsptDisable, setIsHotsptDisable] = React.useState(false);
  const [yaw, setYaw] = React.useState(0);
  const [pitch, setPitch] = React.useState(0);
  const panImage = React.useRef(null);

  const hotspotIcon = (hotSpotDiv, hotSpot) => { 
    console.log('hotSpothotSpot', hotSpot)

    let src= "https://img.icons8.com/material/4ac144/256/camera.png";
    if(hotSpot.isHotsptDisable)
      src = "https://cdn.icon-icons.com/icons2/3958/PNG/512/transportation_vehicle_parking_car_garage_icon_252337.png"

    const image = document.createElement("img");
    image.classList.add("image");
    image.setAttribute("width", "30");
    image.setAttribute("height", "30");
    image.setAttribute(
      "src",
      src
    );
    hotSpotDiv.appendChild(image);
  };

  const fetchScenesArray= async()=>{
    let getScenesArrayPromiseJson= await fetch("https://recuerdotagspoc.azurewebsites.net//api/Tagging/gettagging");
    let getScenesArray= await getScenesArrayPromiseJson.json();

    getScenesArray.scenePanoImg= PhotoBasement_XM;
    getScenesArray.sceneName= "smallRoom";
    getScenesArray.isHotsptDisable= true;
    getScenesArray.payload= getScenesArray.payload.map(yawPitch=>{
      return {
        ...yawPitch,
        isAddInfoEnable: false
      }
    });
    console.log("getScenesArraygetScenesArray",getScenesArray);
    setscenesArray(getScenesArray);
    setisDataLoad(true)
  }

  // TO GET hotSpotsArr ON FIRST-TIME PAGE LOAD
  useEffect(()=>{
    fetchScenesArray();
  },[]);

  const [isTaggingButtonClicked, setIsTaggingButtonClicked] = React.useState(false);
  const toggleIsTaggingButtonClicked = () => { 
    setIsTaggingButtonClicked(!isTaggingButtonClicked);
  }

  const addInfoLable = (currentScene, pitch, yaw) => { 

    const isThereAnyAddInfoEnable =scenesArray.payload.filter(scene=> scene.isAddInfoEnable);
    if(isThereAnyAddInfoEnable.length>0){

      setscenesArray((prevScenesArray) => {
        return {...prevScenesArray, payload: [...prevScenesArray.payload.filter(scene=> !scene.isAddInfoEnable),
          {
            "tagID": tagName,
            "imageID": imageID,
            "tagName": "Photo frame"+tagName,
            "tagPitch": pitch.toString(),
            "tagYaw": yaw.toString(),
            "isAddInfoEnable": true
          }
        ]};
      })

      setPannellumKey(PannellumKey+1)
      settagName(tagName+1);
      setimageID(imageID+1)
    }else{
      setscenesArray((prevScenesArray) => {
        const updatedPayload = [...prevScenesArray.payload, {
          "tagID": tagName,
          "imageID": imageID,
          "tagName": "Photo frame"+tagName,
          "tagPitch": pitch.toString(),
          "tagYaw": yaw.toString(),
          "isAddInfoEnable": true
        }];
        return {...prevScenesArray, payload: updatedPayload};
      });
      setPannellumKey(PannellumKey+1)
      settagName(tagName+1);
      setimageID(imageID+1)
    }

    // // Create an object with the data to be sent in the request body
    //   const data = {
    //     "TagName":"Photo frame",
    //     "TagPitch": pitch.toString(),
    //     "TagYaw": yaw.toString()
    //   };

    //   // Create the request options including the method and headers
    //   const options = {
    //     method: 'POST',
    //     headers: {
    //       'Content-Type': 'application/json',
    //     },
    //     body: JSON.stringify(data),
    //   };
    // // Make the POST request
    // fetch("https://recuerdotagspoc.azurewebsites.net//api/Tagging/savetagging", options)
    //   .then(response => response.json())
    //   .then(data => {
    //     // Handle the response data
    //     console.log(data);
    //     setscenesArray(data);
    //     setisDataLoad(false)
    //     fetchScenesArray()
    //   })
    //   .catch(error => {
    //     // Handle any errors
    //     console.error(error);
    //   });

  }

  useEffect(()=>{
    console.log("PannellumKeyPannellumKey", panImage)
  },[])

  if(!isDataLoad) return "loading..."

  return (
    <>
          <div>
            {" "}
            pitch: {pitch}, yaw: {yaw}, transition: "0"{" "}
          </div>

          <Pannellum
            // showControls= {false}
            // autoRotate= {2000``}
            // hotspotDebug= {true}
            key={PannellumKey}
            type= {"equirectangular"}
            autoLoad= {true}
            ref={panImage}
            width="100%"
            height="500px"
            image={PhotoBasement_XM }
            pitch={10}
            yaw={180}
            hfov={110}
            // autoLoad
            // showZoomCtrl={false}
            onMouseup={(event) => {

            // debugger;
              // IF `isTaggingButtonClicked` `ture`, add `hotspot` and add `icon` shows its `tooltip` to add that `pitch` and `yaw` to DB.
              addInfoLable(scenesArray, panImage.current.getViewer().mouseEventToCoords(event)[0], panImage.current.getViewer().mouseEventToCoords(event)[1]);
              setPitch(panImage.current.getViewer().mouseEventToCoords(event)[0]);
              setYaw(panImage.current.getViewer().mouseEventToCoords(event)[1]);
            }}

            onTouchstart= {()=>{
              alert()
            }}
          >
            {scenesArray.payload.map((hotSpot) => {
              return (
                <Pannellum.Hotspot 
                  key={new Date()}
                  type= {"info"}
                  pitch={hotSpot.tagPitch}
                  yaw={hotSpot.tagYaw}
                  tooltip={(div)=>hotspotIcon(div, hotSpot)}
                  handleClick={(evt, name) =>{

                    if(hotSpot.isHotsptDisable){
                      alert(scenesArray.sceneName)
                    }else{
                      console.log("current 360img part", scenesArray);
                      // setCurrentScene(hotSpot.transition)
                    }

                  }}
                  name="image info"
                  text= {`<p>You can reach Michael at:</p>
                  <ul>
                    <li><a href="https://example.com">Website</a></li>
                  </ul>`}
                />
              );
            })}

          </Pannellum>

          <div>
            <Button  onClick ={toggleIsTaggingButtonClicked} />
          </div>
    </>
  );
}

export default PenneliumReactOne;
mpetroff / pannellum

Component is getting refresh. #1162
