How to use the @bentley/imodeljs-common.RenderMode.SmoothShade function in @bentley/imodeljs-common

private _onChange = (event: React.ChangeEvent) => {
    if (!this.state.viewport)
      return;

    const target = event.target;
    const enabled = target.checked;
    const vp = this.state.viewport;
    const view = vp.view;
    if (view && view.is3d()) {
      const scratchViewFlags = new ViewFlags();
      const vf = vp.viewFlags.clone(scratchViewFlags);
      if (vf.shadows !== enabled) {
        vf.shadows = enabled;
        if (enabled)  // also ensure render mode is set to smooth, this is required to display shadows.
          vf.renderMode = RenderMode.SmoothShade;
        vp.viewFlags = vf;
        vp.synchWithView(true);
        this.forceUpdate();
      }
    }
  }

else if (0 !== target.currentBatchId)
        this.featureMode = FeatureMode.Pick;
      else
        this.featureMode = FeatureMode.None;

      // Determine if we should use the shaders which support discarding surfaces in favor of their edges (and discarding non-planar surfaces in favor of coincident planar surfaces).
      // These are only useful if the geometry defines feature Ids.
      // In 3d, if we're only displaying surfaces or edges, not both, don't bother, unless forceSurfaceDiscard is true.
      this.isEdgeTestNeeded = this.hasFeatures ? (this.isClassified ? IsEdgeTestNeeded.No : IsEdgeTestNeeded.Yes) : IsEdgeTestNeeded.No;
      if (!target.currentViewFlags.forceSurfaceDiscard && target.is3d && !target.isReadPixelsInProgress && this.isEdgeTestNeeded) {
        switch (target.currentViewFlags.renderMode) {
          case RenderMode.Wireframe:
            // We're only displaying edges (ignoring filled planar regions)
            this.isEdgeTestNeeded = IsEdgeTestNeeded.No;
            break;
          case RenderMode.SmoothShade:
            if (!target.currentViewFlags.visibleEdges && !target.wantAmbientOcclusion && pass !== RenderPass.PlanarClassification) {
              // We're only displaying surfaces (ignoring filled planar regions). NB: Filled text with outline is handled by gl.polygonOffset().
              this.isEdgeTestNeeded = IsEdgeTestNeeded.No;
            }
            break;
          default:
            // SolidFill and HiddenLine always display edges and surfaces.
            break;
        }
      }
    }
  }

class RealityModelTileLoader extends TileLoader {
  private readonly _tree: RealityModelTileTreeProps;
  private readonly _batchedIdMap?: BatchedTileIdMap;

  public constructor(tree: RealityModelTileTreeProps, batchedIdMap?: BatchedTileIdMap) {
    super();
    this._tree = tree;
    this._batchedIdMap = batchedIdMap;
  }

  public get doDrapeBackgroundMap(): boolean { return this._tree.doDrapeBackgroundMap; }

  public get maxDepth(): number { return 32; }  // Can be removed when element tile selector is working.
  public get priority(): Tile.LoadPriority { return Tile.LoadPriority.Context; }
  public tileRequiresLoading(params: Tile.Params): boolean { return 0.0 !== params.maximumSize; }
  protected static _viewFlagOverrides = new ViewFlag.Overrides(ViewFlags.fromJSON({ renderMode: RenderMode.SmoothShade }));
  public get viewFlagOverrides() { return RealityModelTileLoader._viewFlagOverrides; }
  public getBatchIdMap(): BatchedTileIdMap | undefined { return this._batchedIdMap; }

  public async getChildrenProps(parent: Tile): Promise {
    const props: RealityModelTileProps[] = [];
    const thisId = parent.contentId;
    const prefix = thisId.length ? thisId + "_" : "";
    const findResult = await this.findTileInJson(this._tree.tilesetJson, thisId, "", undefined, true);
    if (undefined !== findResult && Array.isArray(findResult.json.children)) {
      for (let i = 0; i < findResult.json.children.length; i++) {
        const childId = prefix + i;
        const foundChild = await this.findTileInJson(this._tree.tilesetJson, childId, "", undefined, true);
        if (undefined !== foundChild)
          props.push(new RealityModelTileProps(foundChild.json, foundChild.id, foundChild.transformToRoot));
      }
    }

private wantTextures(target: Target, surfaceTextureExists: boolean): boolean {
    if (this.hasScalarAnimation && undefined !== target.analysisTexture)
      return true;

    if (!surfaceTextureExists)
      return false;

    if (this.isGlyph) {
      return true;
    }
    const fill = this.fillFlags;
    const flags = target.currentViewFlags;

    // ###TODO need to distinguish between gradient fill and actual textures...
    switch (flags.renderMode) {
      case RenderMode.SmoothShade: return flags.textures;
      case RenderMode.Wireframe: return FillFlags.Always === (fill & FillFlags.Always) || (flags.fill && FillFlags.ByView === (fill & FillFlags.ByView));
      default: return FillFlags.Always === (fill & FillFlags.Always);
    }
  }
}

private addRenderMode(): void {
    const div = document.createElement("div") as HTMLDivElement;

    const entries = [
      { name: "Wireframe", value: RenderMode.Wireframe },
      { name: "Solid Fill", value: RenderMode.SolidFill },
      { name: "Hidden Line", value: RenderMode.HiddenLine },
      { name: "Smooth Shade", value: RenderMode.SmoothShade },
    ];

    const select = createComboBox({
      parent: div,
      name: "Render Mode: ",
      entries,
      id: "viewAttr_renderMode",
      value: this._vp.viewFlags.renderMode,
      handler: (thing) => {
        const flags = this._vp.view.viewFlags.clone(this._scratchViewFlags);
        flags.renderMode = Number.parseInt(thing.value, 10);
        this._vp.viewFlags = flags;
        this.sync();
      },
    }).select;

const update = (view: ViewState) => {
      const vf = view.viewFlags;
      const visible = view.is3d() && RenderMode.SmoothShade === vf.renderMode;
      elems.div.style.display = visible ? "block" : "none";
      if (visible)
        elems.checkbox.checked = vf.lighting;
    };

protected insertSpatialView(viewName: string, range: AxisAlignedBox3d, realityModels: ContextRealityModelProps[], geoLocated: boolean): Id64String {
    const modelSelectorId: Id64String = ModelSelector.insert(this.iModelDb, this.definitionModelId, viewName, [this.physicalModelId]);
    const categorySelectorId: Id64String = CategorySelector.insert(this.iModelDb, this.definitionModelId, viewName, []);
    const vf = new ViewFlags();
    vf.backgroundMap = geoLocated;
    vf.renderMode = RenderMode.SmoothShade;
    vf.cameraLights = true;
    const displayStyleId: Id64String = DisplayStyle3d.insert(this.iModelDb, this.definitionModelId, viewName, { viewFlags: vf, contextRealityModels: realityModels });
    return OrthographicViewDefinition.insert(this.iModelDb, this.definitionModelId, viewName, modelSelectorId, categorySelectorId, displayStyleId, range, StandardViewIndex.Iso);
  }
}

    const isAOSupported = (view: ViewState) => view.is3d() && RenderMode.SmoothShade === view.viewFlags.renderMode;
    const isAOEnabled = (view: ViewState) => view.viewFlags.ambientOcclusion;

if (undefined === this._fbo || (!useMRT && undefined === this._featureFbo)) {
      assert(false, "unable to create frame buffer objects");
      return;
    }

    const prevState = System.instance.currentRenderState.clone();
    System.instance.context.viewport(0, 0, this._width, this._height);

    const state = new RenderState();
    state.flags.depthMask = false;
    state.flags.blend = false;
    state.flags.depthTest = false;

    const viewFlags = target.currentViewFlags.clone();
    viewFlags.renderMode = RenderMode.SmoothShade;
    viewFlags.transparency = false;
    viewFlags.textures = false;
    viewFlags.lighting = false;
    viewFlags.shadows = false;
    viewFlags.noGeometryMap = true;
    viewFlags.monochrome = false;
    viewFlags.materials = false;
    viewFlags.ambientOcclusion = false;
    viewFlags.visibleEdges = viewFlags.hiddenEdges = false;

    const stack = new BranchStack();
    const batchState = new BatchState(stack);
    System.instance.applyRenderState(state);
    const prevPlan = target.plan;

    const prevBgColor = target.bgColor.tbgr;

public static createForDecorations(): BranchState {
    const vf = new ViewFlags();
    vf.renderMode = RenderMode.SmoothShade;
    vf.lighting = false;
    return new BranchState(vf, Transform.createIdentity(), new FeatureSymbology.Overrides());
  }