Hay 4 pantallas en una página a las que llamé viewPort. Al hacer clic en el botón, quiero agregar una Elipse de configuraciones predefinidas en el viewPort seleccionado.

viewPort(1/2/3/4) es un objeto que se parece a esto:

 { regionLines: [ { uid: "region-line-1", startPoint: { x: 1476, y: 1097 }, middlePoint: { x: 2149, y: 1601 }, endPoint: { x: 2021, y: 2242 }, }, { uid: "region-line-2", startPoint: { x: 1528, y: 921 }, middlePoint: { x: 2294, y: 1564 }, endPoint: { x: 2230, y: 2279 }, }, ], lesions: [ { uid: "lesion-1", type: "ellipse-lesion", point: { x: 1857, y: 896 }, xRadius: 135, yRadius: 75, rotationAngle: 25, isEditable: true, isVisible: true, }, { uid: "lesion-2", type: "polyline-lesion", isEditable: true, isVisible: true, points: [ { x: 1624, y: 1026 }, { x: 1722, y: 969 } ], }, ], };

El problema al que me enfrento es con setViewPort (1/2/3/4). En la declaración if cuando se ejecuta setViewPort, también actualiza todos los demás setViewPort.

 function setFinding() { const addEllipse = { uid: "lesion-32321", type: "ellipse-lesion", point: { x: 2857, y: 896 }, xRadius: 135, yRadius: 75, rotationAngle: 25, isEditable: true, isVisible: true, style: { color: "#0E5715", fillColor: "#0E5715", fillOpacity: 0.2, dashedLine: true, }, } let newLesion if(viewportsCore.layoutController.getActiveContainerId()==='viewport-container-1-1'){ newLesion = viewPort1 newLesion.lesions.push(addEllipse) // console.log('this is new lesion info in viewport 1', newLesion) setViewPort1(newLesion) } else if(viewportsCore.layoutController.getActiveContainerId()==='viewport-container-2-1'){ // console.log('this is new lesion info in viewport2 before', viewPort1, viewPort2) newLesion = viewPort2 // console.log('this is new lesion info in viewport2 after', newLesion) newLesion.lesions.push(addEllipse) setViewPort2(newLesion) } else if(viewportsCore.layoutController.getActiveContainerId()==='viewport-container-1-2'){ newLesion = viewPort3 newLesion.lesions.push(addEllipse) // console.log('this is new lesion info in viewport 3', newLesion) setViewPort3(newLesion) } else{ newLesion = viewPort4 newLesion.lesions.push(addEllipse) // console.log('this is new lesion info viewport4', newLesion) setViewPort4(newLesion) } viewportsCore.mgLesionsController.createMGLesion( viewportsCore.layoutController.getActiveContainerId(), newLesion ); }

¿Hay alguna forma de dejar de actualizar todos los demás valores de setState? ¿O me estoy perdiendo algo?