How to use the @bentley/ui-core.Position.Bottom function in @bentley/ui-core

private renderDropdown() {
    const liStyle: React.CSSProperties = {
      height: this._itemHeight + "em",
    };
    return (
      
        <div>
          {this.renderProjects()}
          <div>
          <div style="{liStyle}">
            <span>
            More
          </span></div>
        </div>
      
    );
  }
</div>

className={"expandable"}
        >
          
            }
            onClick={this._toggleIsExpanded}
          >
          
        
        
          {this.getExpandedContent()}
        
      
    );
  }

data-testid="components-weightpicker-button"
                className={buttonClassNames}
                weight={this.props.activeWeight}
                colorDef={this.props.colorDef}
                readonly={this.props.readonly}
                disabled={this.props.disabled}
                hideLabel={this.props.hideLabel}
                aria-haspopup="listbox"
                aria-expanded={this.state.showPopup}
                onClick={this._togglePopup} />
            
            
              {this.renderPopup(this.props.dropDownTitle)}
            
          
        }

this.setState((prevState) => {
      let direction = prevState.direction;
      switch (direction) {
        case PopupDirection.Left: {
          direction = PopupDirection.Top;
          break;
        }
        case PopupDirection.Top: {
          direction = PopupDirection.Right;
          break;
        }
        case PopupDirection.Right: {
          direction = PopupDirection.Bottom;
          break;
        }
        case PopupDirection.Bottom: {
          direction = PopupDirection.Left;
          break;
        }
      }
      return {
        ...prevState,
        direction: prevState.isPanelVisible ? prevState.direction : direction,
        isPanelVisible: !prevState.isPanelVisible,
      };
    });
  }

public render() {
    const { values, value } = this.props;
    const { showPopup } = this.state;
    const buttonClassName = classnames("iot-color-picker-button", this.state.showPopup && "opened");

    return (
      <>
        <button disabled="{true}" style="{{">
          <span>{value}</span>
          <span>
        </span></button>
        
          {this.renderPopup()}
        
      
    );
  }
}

public render() {
    const { className, ...props } = this.props;
    return (
      
        <div>
          {this.props.children}
        </div>
      
    );
  }
}

this.setState((prevState) => {
      let direction = prevState.direction;
      switch (direction) {
        case PopupDirection.Left: {
          direction = PopupDirection.Top;
          break;
        }
        case PopupDirection.Top: {
          direction = PopupDirection.Right;
          break;
        }
        case PopupDirection.Right: {
          direction = PopupDirection.Bottom;
          break;
        }
        case PopupDirection.Bottom: {
          direction = PopupDirection.Left;
          break;
        }
      }
      return {
        ...prevState,
        direction: prevState.isPanelVisible ? prevState.direction : direction,
        isPanelVisible: !prevState.isPanelVisible,
      };
    });
  }

private renderDropdown() {
    const liStyle: CSSProperties = {
      height: this._itemHeight + "em",
    };
    return (
      
        <div>
          {this.renderProjects()}
          <div>
          <div style="{liStyle}">
            <span>
            More
          </span></div>
        </div>
      
    );
  }
</div>