How to use the panzoom function in panzoom

export default function createRenderer(progress) {
  const scene = document.querySelector('#scene');
  const nodeContainer = scene.querySelector('#nodes');
  const edgeContainer = scene.querySelector('#edges');
  let lastPanTime = 0;
  let lastTouchEndTime = 0;
  let clickTimeout;

  const panzoom = createPanZoom(scene);
  const defaultRectangle = { left: -500, right: 500, top: -500, bottom: 500 };
  panzoom.showRectangle(defaultRectangle);

  // maps node id to node ui
  let nodes = new Map();

  let layout,
    graph,
    currentLayoutFrame = 0,
    linkAnimator;
  let textMeasure = createTextMeasure(scene);
  bus.on('graph-ready', onGraphReady);

  return {
    render,
    dispose

private createPanZoom() {
        if (!this.panZoomRootRef.current) {
            return;
        }

        this.panZoomRootRefCurrent = this.panZoomRootRef.current;
        this.panZoomComp = panzoom(this.panZoomRootRef.current, {
            beforeWheel: (e) => {
                // allow wheel-zoom only if ctrl is down.
                return !e.ctrlKey;
            },
            smoothScroll: false,
        });
        if (this.props.setPanZoomComp) {
            this.props.setPanZoomComp(this.panZoomComp, this.panZoomRootRef.current);
        }
    }

export default function createRenderer(progress) {
  const scene = document.querySelector('#scene');
  const nodeContainer = scene.querySelector('#nodes');
  const edgeContainer = scene.querySelector('#edges');
  const hideTooltipArgs = {isVisible: false};

  const panzoom = createPanZoom(scene);
  const defaultRectangle = {left: -500, right: 500, top: -500, bottom: 500}
  panzoom.showRectangle(defaultRectangle);

  // maps node id to node ui
  let nodes = new Map();

  let layout, graph, currentLayoutFrame = 0, linkAnimator;
  let textMeasure = createTextMeasure(scene);
  bus.on('graph-ready', onGraphReady);

  return {
    render,
    dispose
  }

  function dispose() {

function initPanzoom() {
    let initializedPanzoom = makePanzoom(gl.canvas, {
      realPinch: true,
      zoomSpeed: 0.025,
      controller: wglPanZoom(gl.canvas, updateBoundingBox)
    });

    return initializedPanzoom;
  }

getClientCoordinate,
    getTransform,
    getRoot,
    removeChild,
    setViewBox,
    setClearColor,
    dispose,
    renderFrame,

    getPixelRatio,
    setPixelRatio
  });

  var wglController = wglPanZoom(canvas, sceneRoot, api);

  var panzoom = makePanzoom(canvas, {
    zoomSpeed: 0.025,
    controller: wglController 
  });

  sceneRoot.bindScene(api);

  var disposeClick;
  listenToEvents();

  renderFrame();

  return api;

  function getPixelRatio() {
    return pixelRatio;
  }

reset() {
      this.$refs.content.removeAttribute('style');
      if (this.pz) {
        this.pz.dispose();
        this.pz = undefined;
      }
      const opts = {
        maxZoom: 5.0,
        minZoom: 1.0,
        smoothScroll: false
      };
      this.pz = panzoom(this.$refs.content, opts);
    }
  }

mounted() {
    const { scene } = this.$refs;
    this.zoomHandle = panZoom(scene);
    const rect = this.$el.getBoundingClientRect();
    this.zoomHandle.moveTo(rect.width / 2, rect.height / 2);
    this.initEvents(scene);
    this.initializeGraph(this.graph);
  },