How to use the @bentley/imodeljs-frontend.ToolSettingsValue function in @bentley/imodeljs-frontend

return {
      name: ToolWithSettings._stateName,
      displayLabel: IModelApp.i18n.translate("SampleApp:tools.ToolWithSettings.Prompts.State"),
      typename: "string",
      editor: {
        params: [{
          type: PropertyEditorParamTypes.InputEditorSize,
          size: 4,
          /* maxLength: 60,*/
        } as InputEditorSizeParams,
        ],
      },
    };
  }

  private _stateValue = new ToolSettingsValue("PA");

  public get state(): string {
    return this._stateValue.value as string;
  }

  public set state(option: string) {
    this._stateValue.value = option;
  }

  // ------------- text based edit field ---------------
  private static _coordinateName = "coordinate";
  private static _getCoordinateDescription = (): PropertyDescription => {
    return {
      name: ToolWithSettings._coordinateName,
      displayLabel: IModelApp.i18n.translate("SampleApp:tools.ToolWithSettings.Prompts.Coordinate"),
      typename: "string",

private syncLengthState(): void {
    const lengthValue = new ToolSettingsValue(this.length);
    lengthValue.displayValue = this._lengthDescription.format(lengthValue.value as number);
    const syncItem: ToolSettingsPropertySyncItem = { value: lengthValue, propertyName: ToolWithSettings._lengthName, isDisabled: !this.useLength };
    this.syncToolSettingsProperties([syncItem]);
  }

public syncAlarmUi(monitorTime: Date, alarmText?: string): void {
    this.monitorTime = monitorTime;
    const properties = [];
    properties.push(new ToolSettingsPropertyItem(new ToolSettingsValue(this.monitorTime), this.monitorTimePropertyName));
    if (alarmText) {
      this.alarmText = alarmText;
      properties.push(new ToolSettingsPropertyItem(new ToolSettingsValue(this.alarmText), this.alarmTextPropertyName));
    }

    this.onSyncPropertiesChangeEvent.emit({ properties });
  }

private syncFolderCountInUi() {
    const properties = [new ToolSettingsPropertyItem(new ToolSettingsValue(this.folderCount), this.folderCountPropertyName)];
    this.onSyncPropertiesChangeEvent.emit({ properties });
  }

public supplyAvailableProperties(): ToolSettingsPropertyItem[] {
    return [
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.currentAnimationType as number), this.currentAnimationTypePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.monitorMode), this.monitorModePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.startTime), this.startTimePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.endTime), this.endTimePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.monitorTime), this.monitorTimePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.minDate), this.minDatePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.maxDate), this.maxDatePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.alarmText), this.alarmTextPropertyName),
    ];
  }

public supplyAvailableProperties(): ToolSettingsPropertyItem[] {
    return [
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.currentAnimationType as number), this.currentAnimationTypePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.monitorMode), this.monitorModePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.startTime), this.startTimePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.endTime), this.endTimePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.monitorTime), this.monitorTimePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.minDate), this.minDatePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.maxDate), this.maxDatePropertyName),
      new ToolSettingsPropertyItem(new ToolSettingsValue(this.alarmText), this.alarmTextPropertyName),
    ];
  }