There are 4 screens on a page which I called them viewPort. On button click I want to add an Ellipse of predefined settings on the selected viewPort.

viewPort(1/2/3/4) is an object that looks like this:

{      
  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 }
      ],
    },
  ],
};

The problem I am facing is with setViewPort(1/2/3/4). In if statement when the setViewPort is run it updates all other setViewPort as well.

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
);
}

Is there any way to stop updating all other setState values? Or am I missing anything?