How to use the @bentley/ui-core.Face.Back function in @bentley/ui-core

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];
        faces[f] =

[Face.Top]: Vector3d.create(HitBoxX.None, HitBoxY.None, HitBoxZ.Top),
};

const cubeNavigationFaceRotations: { [key: string]: Matrix3d } = {
  [Face.Left]: Matrix3d.createRowValues(0, -1, 0, 0, 0, 1, -1, 0, 0),
  [Face.Right]: Matrix3d.createRowValues(0, 1, 0, 0, 0, 1, 1, 0, 0),
  [Face.Back]: Matrix3d.createRowValues(-1, 0, 0, 0, 0, 1, 0, 1, 0),
  [Face.Front]: Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0),
  [Face.Bottom]: Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, -1),
  [Face.Top]: Matrix3d.createRowValues(1, 0, 0, 0, 1, 0, 0, 0, 1),
};

// data relating Up/Down/Left/Right directions relative to every surface
const cubeNavigationRoutes: { [key: string]: CubeNavigationRotationMap } = {
  [Face.Front]: { up: Face.Top, down: Face.Bottom, left: Face.Left, right: Face.Right },
  [Face.Back]: { up: Face.Top, down: Face.Bottom, left: Face.Right, right: Face.Left },
  [Face.Top]: { up: Face.Back, down: Face.Front, left: Face.Left, right: Face.Right },
  [Face.Bottom]: { up: Face.Front, down: Face.Back, left: Face.Left, right: Face.Right },
  [Face.Right]: { up: Face.Top, down: Face.Bottom, left: Face.Front, right: Face.Back },
  [Face.Left]: { up: Face.Top, down: Face.Bottom, left: Face.Back, right: Face.Front },
};

/** @internal */
export enum CubeHover {
  None = 0,
  Hover,
  Active,
}

/** Properties for the [[CubeNavigationAid]] component
 * @alpha
 */

None = 0,
  Top = 1,
  Bottom = -1,
}

interface CubeNavigationRotationMap {
  up: Face;
  down: Face;
  left: Face;
  right: Face;
}

const cubeNavigationFaceLocs: { [key: string]: Vector3d } = {
  [Face.Left]: Vector3d.create(HitBoxX.Left, HitBoxY.None, HitBoxZ.None),
  [Face.Right]: Vector3d.create(HitBoxX.Right, HitBoxY.None, HitBoxZ.None),
  [Face.Back]: Vector3d.create(HitBoxX.None, HitBoxY.Back, HitBoxZ.None),
  [Face.Front]: Vector3d.create(HitBoxX.None, HitBoxY.Front, HitBoxZ.None),
  [Face.Bottom]: Vector3d.create(HitBoxX.None, HitBoxY.None, HitBoxZ.Bottom),
  [Face.Top]: Vector3d.create(HitBoxX.None, HitBoxY.None, HitBoxZ.Top),
};

const cubeNavigationFaceRotations: { [key: string]: Matrix3d } = {
  [Face.Left]: Matrix3d.createRowValues(0, -1, 0, 0, 0, 1, -1, 0, 0),
  [Face.Right]: Matrix3d.createRowValues(0, 1, 0, 0, 0, 1, 1, 0, 0),
  [Face.Back]: Matrix3d.createRowValues(-1, 0, 0, 0, 0, 1, 0, 1, 0),
  [Face.Front]: Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0),
  [Face.Bottom]: Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, -1),
  [Face.Top]: Matrix3d.createRowValues(1, 0, 0, 0, 1, 0, 0, 0, 1),
};

// data relating Up/Down/Left/Right directions relative to every surface
const cubeNavigationRoutes: { [key: string]: CubeNavigationRotationMap } = {