How to use the pixi-viewport function in pixi-viewport

// setup PIXI
    this.app = new PIXI.Application({
      autoResize: true,
      antialias: false,
      roundPixels: true,
      forceCanvas: false,
      legacy: true,
      resolution: devicePixelRatio,
    });
    PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
    element.style.cursor = 'default';
    element.style['user-select'] = 'none';
    element.appendChild(this.app.view);

    // create viewport
    this.viewport = new Viewport({
      screenWidth: this.app.screen.width,
      screenHeight: this.app.screen.height,
      worldWidth: this.worldWidth,
      worldHeight: this.worldHeight,
      divWheel: element,
    });
    (window as any).PIXIAPP = this.app;
    (window as any).WORLD_RENDER_VIEWPORT = this.viewport;
    (window as any).WORLD_RENDER_OPTIONS = options;
    (window as any).WORLD_RENDER_DRAW = () => {
      this.chunkRenderer.render();
      this.update();
      this.updateViewportState();
    }
    this.app.stage.addChild(this.viewport);
    this.viewport.moveCenter(this.worldWidth / 2, this.worldHeight / 2);

// use ref of parent div and use its width and height
    const { parent } = this.props;
    // ! Subtraction hack to fix the scrolling thing
    const width = parent.current.clientWidth - 10;
    const height = parent.current.clientHeight - 10;

    this.pixi = React.createRef();

    this.app = new PIXI.Application({
      width,
      height,
      transparent: false,
      antialias: true, // special filtering to look smoother
      resolution: 1 // for different screen resolutions/types
    });
    this.viewport = new Viewport({
      screenWidth: width,
      screenHeight: height,
      worldHeight: 1000,
      worldWidth: 1000,
      interaction: this.app.renderer.interaction,
      passiveWheel: false // presence of unnecessary passive event listeners causes a warning
    });
    this.app.renderer.backgroundColor = parseInt(theme.contentBackground.slice(1), 16);
    this.tables = []; // TODO: investigate cleaner solutions
    this.texture = null;
    this.foreground = null;
    this.background = null;
    this.gridSize = 50;
  }

this.cellEvents = cellEvents;
    const screenWidth = window.innerWidth;
    const screenHeight = (window.innerHeight - 50);
    const app = new PIXI.Application({
      width: screenWidth,
      height: screenHeight,
      antialias: false,
      roundPixels: true,
      forceCanvas: false,
      legacy: true,
    });
    (window as any).pixi = app;
    PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
    const worldWidth = world.size.width * CELL_WIDTH;
    const worldHeight = world.size.height * CELL_HEIGHT;
    const viewport = new Viewport({
      screenWidth,
      screenHeight,
      worldWidth,
      worldHeight,
      divWheel: element,
    });
    // window.addEventListener('resize', this.onResize, true);
    app.stage.addChild(viewport);
    element.style.cursor = 'default';

    const arrowLayer = new PIXI.Container();
    const mapModesLayer = new PIXI.Container();
    arrowLayer.cacheAsBitmap = true;

    const cursors = new PIXI.Container();
    viewport.addChild(cursors);