How to use the @bentley/ui-components.ViewportComponentEvents.setCubeMatrix function in @bentley/ui-components

private _setRotation = (endRotMatrix: Matrix3d, face: Face) => {
    ViewportComponentEvents.setCubeMatrix(endRotMatrix, face);
    // set variables, with animTime at 0 to prevent animation.
    this.setState({
      startRotMatrix: endRotMatrix,
      endRotMatrix,
      animation: 1,
      face,
    });
  }
}

private _onMouseUp = () => {
    if (this.state.dragging) {
      this.setState({ dragging: false });
      ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, CubeNavigationAid._getMatrixFace(this.state.endRotMatrix), true);
    }

    // remove so event only triggers after this.onMouseStartDrag
    window.removeEventListener("mousemove", this._onMouseMove);
    window.removeEventListener("mouseup", this._onMouseUp);
  }

private _animationEnd = () => {
    ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, this.state.face, true);
    const startRotMatrix = this.state.endRotMatrix.clone();
    // istanbul ignore next
    if (this._mounted) {
      this.setState({ startRotMatrix }, () => {
        // istanbul ignore else
        if (this.props.onAnimationEnd)
          this.props.onAnimationEnd();
      });
    }
  }

public render(): React.ReactNode {
    const { animation, startRotMatrix, endRotMatrix } = this.state;
    const visible = CubeNavigationAid._isMatrixFace(endRotMatrix) && animation === 1.0;
    const rotMatrix = CubeNavigationAid._interpolateRotMatrix(startRotMatrix, animation, endRotMatrix);
    if (rotMatrix !== startRotMatrix && rotMatrix !== endRotMatrix)
      ViewportComponentEvents.setCubeMatrix(rotMatrix, Face.None);

    const labels: { [key: string]: string } = {
      [Face.Right]: UiFramework.translate("cube.right"),
      [Face.Left]: UiFramework.translate("cube.left"),
      [Face.Back]: UiFramework.translate("cube.back"),
      [Face.Front]: UiFramework.translate("cube.front"),
      [Face.Top]: UiFramework.translate("cube.top"),
      [Face.Bottom]: UiFramework.translate("cube.bottom"),
    };

    const faces: { [key: string]: React.ReactNode } = {};
    for (const key in labels) {
      // istanbul ignore else
      if (labels.hasOwnProperty(key)) {
        const f = key as Face;
        const label = labels[f];