Incorrect behavior when changing opacity for a separate pocket about ngl HOT 3 CLOSED

import { useState, useEffect, useRef } from "react";
import * as NGL from "ngl";
import pdbUrl from "../../assets/test-pockets/3hi7.pdb";
import pocket1Url from "../../assets/test-pockets/pocket1.sdf";
import pocket2Url from "../../assets/test-pockets/pocket2.sdf";

const TestOpacity = () => {
  const containerRef = useRef();
  const stageRef = useRef();
  const pocketReps = useRef([]); // To store pocket representations

  const [pocketsArray, setPocketsArray] = useState([
    { url: pocket1Url, checked: false, color: "red", name: 'red' },
    { url: pocket2Url, checked: false, color: 'blue', name: 'blue' },
  ]);

  const prevPocketsRef = useRef();

  // Initialize NGL Stage
  useEffect(() => {
    const stage = new NGL.Stage(containerRef.current, {
      backgroundColor: "#ededed",
    });
    stageRef.current = stage;

    // Cleanup function
    return () => {
      if (stage) {
        stage.viewer.wrapper.remove();
        stage.viewer.renderer.forceContextLoss();
        stage.dispose();
      }
    };
  }, []);

  // Load main PDB file
  useEffect(() => {
    if (pdbUrl && stageRef.current) {
      stageRef.current
        .loadFile(pdbUrl, {
          defaultRepresentation: true,
        })
        .then((o) => {
          console.log("Loaded object:", o);
          o.addRepresentation("cartoon");
          o.autoView();
        })
        .catch((error) => {
          console.error("Error loading file:", error);
        });
    }
  }, [pdbUrl]);

 // Load pockets only once or when URLs change
  useEffect(() => {
    if (stageRef.current) {
      pocketsArray.forEach((pocket, index) => {
        stageRef.current
          .loadFile(pocket.url)
          .then((o) => {
            const rep = o.addRepresentation("surface", {
              color: pocket.color,
              opacity: pocket.checked ? 1 : 0.3,
            });
            pocketReps.current[index] = rep;
          })
          .catch((error) => {
            console.error("Error loading pocket:", error);
          });
      });
    }

    const currentPocketReps = pocketReps.current;

    // Cleanup function
    return () => {
        currentPocketReps.forEach(rep => rep && rep.dispose());
    };
  }, [pocketsArray.map(pocket => pocket.url)]);



  // Update opacity when checked state changes
  useEffect(() => {
    pocketsArray.forEach((pocket, index) => {
      const rep = pocketReps.current[index];
      if (rep && prevPocketsRef.current && prevPocketsRef.current[index].checked !== pocket.checked) {
        rep.setParameters({ opacity: pocket.checked ? 1 : 0.3 });
      }
    });

    prevPocketsRef.current = pocketsArray;
  }, [pocketsArray.map(pocket => pocket.checked)]); 



  // Toggle checked state
  const toggleChecked = (index) => {
    setPocketsArray((currentPockets) =>
      currentPockets.map((pocket, idx) =>
        idx === index ? { ...pocket, checked: !pocket.checked } : pocket
      )
    );
  };

  return (
    <div>
      <div>
        {pocketsArray.map((pocket, index) => (
          <label key={index}>
            <input
              type="checkbox"
              checked={pocket.checked}
              onChange={() => toggleChecked(index)}
            />
            Pocket {pocket.name}
          </label>
        ))}
      </div>
      <div ref={containerRef} style={{ width: "90vw", height: "90vh" }} />
    </div>
  );
};

export default TestOpacity;