Магический эффект requestAnimationFrame в react-three-fiber

У меня есть компонент с канвасом, в который я загружаю файл, он парсится и отрисовывается на канвасе без проблем. У меня логика прописана так, что-бы объект загружался и сохранялся в state один раз и не переписывался, если попытаться загрузить другой. Но я не понимаю почему при загрузке второй раз, объект в канвасе всё равно перерисовывается и при этом state не меняется. В отладчике браузера в консоли вижу надпись от react-three-fiber "requestAnimationFrame", кто нибудь может мне объяснить почему так происходит?

// Imports...    

export default function Viewer() {
const dispatch = useDispatch();
const [inputClass, setInputClass] = useState("inputLoader");
const tomograms = useSelector((state) => state.tomograms);


const handleDragOver = (e) => {
e.preventDefault();
setInputClass("inputLoader2");
};

const handleDragLeave = (e) => {
e.preventDefault();
setInputClass("inputLoader");
};

const handleOneDrop = async (e) => {
let files = [...e.dataTransfer.files];

  const mgz = files.findIndex((e) => /.mgz/.test(e.name));

  if (mgz > -1) {
    const reader = new FileReader();
    reader.readAsDataURL(files[mgz]);
    reader.onload = function (e) {
      onload(
        e.target.result,
        dispatch,
        tomogramsAC,
        setR1Index,
        setR2Index,
        setR3Index,
        syntheticTomogramsAC,
        tomograms
      );
    };
  }


setInputClass("inputLoader");
};

 return (
  <div className="block">
    <div
      onDragOver={(e) => handleDragOver(e)}
      className="canvasDiv"
      id="r0"
    >
      <input
        className={inputClass}
        id="file-input"
        type="file"
        title=""
        onDrop={(e) => handleOneDrop(e)}
        onDragLeave={(e) => handleDragLeave(e)}
      />
    </div>
    <div
      onWheel={(e) => handleChangeSlice(e)}
      className="canvasDiv sagittal"
    >
      <Canvas
        frameloop="demand"
        orthographic
        camera={{position: [200, 0, 0]}}
      >
        {tomograms ? (
          <primitive
            position={[-127, -145, -105]}
            object={
              new THREE.Mesh(
                tomograms.r2.stackHelper._slice._geometry,
                tomograms.r2.stackHelper._slice._material
              )
            }
          />
        ) : null}
      </Canvas>
    </div>
  </div>
 );
}