How to use the @bentley/ui-framework.ContentViewManager.getActiveContentControl function in @bentley/ui-framework

private _stopAnimation = () => {
    if (!this.state.isAnimating)
      return; // already not animating!
    this.setState({ isAnimating: false, isAnimationPaused: false, elapsedTime: 0 });

    const activeContentControl = ContentViewManager.getActiveContentControl();
    if (activeContentControl && activeContentControl.viewport) {
      activeContentControl.viewport.animationFraction = 0;
    }
    window.cancelAnimationFrame(this._requestFrame);
  }

execute: async () => {
      const activeContentControl = ContentViewManager.getActiveContentControl();
      if (activeContentControl && activeContentControl.viewport &&
        (undefined !== activeContentControl.viewport.view.analysisStyle || undefined !== activeContentControl.viewport.view.scheduleScript)) {
        const frontstageProvider = new NestedAnimationStage();
        const frontstageDef = frontstageProvider.initializeDef();
        SampleAppIModelApp.saveAnimationViewId(activeContentControl.viewport.view.id);
        await FrontstageManager.openNestedFrontstage(frontstageDef);
      }
    },
    isVisible: false, // default to not show and then allow stateFunc to redefine.

public componentDidMount() {
    FrontstageManager.onContentControlActivatedEvent.addListener(this._handleContentControlActivatedEvent);

    // tslint:disable-next-line: no-floating-promises
    this.setStateFromActiveContent(ContentViewManager.getActiveContentControl());
  }

private _onAnimationFractionChanged = (animationFraction: number) => {
    if (this.state.dataProvider && undefined === this.state.dataProvider.viewport) {
      const activeContentControl = ContentViewManager.getActiveContentControl();
      if (activeContentControl && activeContentControl.viewport) {
        if (this.state.viewId === activeContentControl.viewport.view.id)
          this.state.dataProvider.viewport = activeContentControl.viewport;
      }
    }

    if (this.state.dataProvider && this.state.dataProvider.onAnimationFractionChanged)
      this.state.dataProvider.onAnimationFractionChanged(animationFraction);
  }

stateFunc: (currentState: Readonly): BaseItemState => {
        const returnState: BaseItemState = { ...currentState };
        returnState.isVisible = ContentViewManager.isContent3dView(ContentViewManager.getActiveContentControl());
        return returnState;
      },
    });

public componentDidMount() {
    FrontstageManager.onContentControlActivatedEvent.addListener(this._handleContentControlActivatedEvent);
    this.setStateFromActiveContent(ContentViewManager.getActiveContentControl());
  }

public componentWillUnmount() {
    const activeContentControl = ContentViewManager.getActiveContentControl();
    if (activeContentControl && activeContentControl.viewport) {
      activeContentControl.viewport.animationFraction = 0;
      window.cancelAnimationFrame(this._requestFrame);
    }
    this._unmounted = true;
  }

private _anotherGroupStateFunc = (currentState: Readonly): BaseItemState => {
    const returnState: BaseItemState = { ...currentState };
    returnState.isVisible = ContentViewManager.isContent3dView(ContentViewManager.getActiveContentControl());
    return returnState;
  }

stateFunc: (currentState: Readonly): BaseItemState => {
        const returnState: BaseItemState = { ...currentState };
        const activeContentControl = ContentViewManager.getActiveContentControl();

        if (activeContentControl && activeContentControl.viewport && (undefined !== activeContentControl.viewport.view.analysisStyle))
          returnState.isVisible = true;
        else
          returnState.isVisible = false;
        return returnState;
      },
    });

public componentWillUnmount() {
    const activeContentControl = ContentViewManager.getActiveContentControl();
    if (activeContentControl && activeContentControl.viewport) {
      activeContentControl.viewport.animationFraction = 0;
    }
  }