How to use the @bentley/ui-core.CheckBoxState.Off function in @bentley/ui-core

private _onCheckboxClick = async (stateChanges: Array<{ node: TreeNodeItem, newState: CheckBoxState }>) => {
    for (const { node } of stateChanges) {
      // toggle the state of the checkbox
      const check = (node.checkBoxState === CheckBoxState.On) ? CheckBoxState.Off : CheckBoxState.On;

      // get the selected nodes
      const _selectedNodes = this.state.selectedNodes.slice();

      // change the state of the selected node (which will recursively change any children)
      await this._onNodesSelected(_selectedNodes, node, check);

      // finally set the state
      this.setState({ selectedNodes: _selectedNodes });
    }
  }

private onCheckboxClick = (stateChanges: Array<{ node: TreeNodeItem, newState: CheckBoxState }>) => {
    const selectedNodes: TreeNodeItem[] = [];
    const deselectedNodes: TreeNodeItem[] = [];
    for (const { node, newState } of stateChanges) {
      switch (newState) {
        case CheckBoxState.On:
          selectedNodes.push(node);
          break;

        case CheckBoxState.Off:
          deselectedNodes.push(node);
          break;
      }
    }

    // tslint:disable-next-line: no-floating-promises
    this.addToSelection(selectedNodes, false);
    // tslint:disable-next-line: no-floating-promises
    this.removeFromSelection(deselectedNodes);
  }
  public render() {

onCheckboxStateChanged: (stateChanges) => {
          for (const { node, newState } of stateChanges) {
            if (newState === CheckBoxState.Off) {
              node.uncheck();
            } else {
              node.check();
            }
          }

          // istanbul ignore else
          if (props.onCheckboxClick) {
            props.onCheckboxClick(stateChanges.map(({ node, newState }) => ({ node: node.payload!, newState })));
          }
        },
      },

return (node: TreeNodeItem): CheckBoxInfo => ({
      isVisible: true,
      state: (this.state.selectedNodes.indexOf(node.id) !== -1) ? CheckBoxState.On : CheckBoxState.Off,
    });
  }

private createTreeNodeProps(node: BeInspireTreeNode): TreeNodeProps {
    const onNodeSelectionChanged = this._selectionHandler.createSelectionFunction(this._multiSelectionHandler, this._createItemSelectionHandler(node));

    return {
      node,
      checkboxProps: node.itree!.state!.checkboxVisible ? {
        isDisabled: node.itree!.state!.checkboxDisabled,
        state: node.itree!.state!.checked ? CheckBoxState.On : CheckBoxState.Off,
        onClick: this._onCheckboxClick,
        tooltip: node.itree!.checkboxTooltip,
      } : undefined,
      cellEditing: this.state.cellEditingEngine,
      showDescription: this.props.showDescriptions,
      renderOverrides: {
        renderCheckbox: this.props.renderOverrides ? this.props.renderOverrides.renderCheckbox : undefined,
      },
      renderId: this._nodesRenderInfo ? this._nodesRenderInfo.renderId : undefined,
      onFinalRenderComplete: this._onNodeFullyRendered,
      highlightProps: this.state.highlightingEngine
        ? this.state.highlightingEngine.createRenderProps(node)
        : undefined,
      valueRendererManager: this.props.propertyValueRendererManager
        ? this.props.propertyValueRendererManager
        : PropertyValueRendererManager.defaultManager,

const createCheckBoxInfo = (status: VisibilityStatus): CheckBoxInfo => ({
  state: status.isDisplayed ? CheckBoxState.On : CheckBoxState.Off,
  isDisabled: status.isDisabled,
  isVisible: true,
  tooltip: status.tooltip,
});

private getNodeCheckBoxInfo(
    node: TreeNodeItem,
  ): CheckBoxInfo | Promise {
    const key = this.state.activeGroup.dataProvider.getNodeKey(node);
    const nodeId = NodeKey.isInstanceNodeKey(key) ? key.instanceKey.id : "";
    const item = this._getItem(nodeId);
    if (item && this.props.activeView) {
      const view = this.props.activeView.view as SpatialViewState;
      let state = CheckBoxState.Off;
      const group = this.state.activeGroup.id;
      if (
        (group === Groups.Models && view.modelSelector.models.has(item.key)) ||
        (group === Groups.Categories &&
          view.categorySelector.categories.has(item.key))
      )
        state = CheckBoxState.On;
      return { isDisabled: false, isVisible: true, state };
    }
    return {};
  }

if (node.itree!.checkboxTooltip !== status.tooltip) {
      node.itree!.checkboxTooltip = status.tooltip;
      hasChanges = true;
    }
    if (node.itree!.state!.checkboxVisible !== status.isVisible) {
      node.itree!.state!.checkboxVisible = status.isVisible;
      hasChanges = true;
    }
    if (node.itree!.state!.checkboxDisabled !== status.isDisabled) {
      node.itree!.state!.checkboxDisabled = status.isDisabled;
      hasChanges = true;
    }
    if (status.state === CheckBoxState.On && !node.itree!.state!.checked) {
      node.check();
      hasChanges = true;
    } else if (status.state === CheckBoxState.Off && node.itree!.state!.checked) {
      node.uncheck();
      hasChanges = true;
    }
    if (hasChanges) {
      node.markDirty();
      this.applyChanges();
    }
  }

parents.forEach((parent) => {
      parent.checkBoxState = CheckBoxState.Off;
      parent.labelBold = false;
      promises.push(this.state.treeInfo!.dataProvider.getNodes(parent));
    });
    this.state.treeInfo!.dataProvider.onTreeNodeChanged.raiseEvent(parents);

items.forEach((item: TreeNodeItem) => {
      item.checkBoxState = CheckBoxState.Off;
      item.labelBold = false;
      this._setItemState(item, false);
    });
    return true;