Реагировать в стиле inline с реактивным ремнем

Question

Я пытаюсь установить встроенный стиль для своего компонента на основе раскрывающегося компонента реагирующей ленты, и мне не удается понять, почему он работает только при непосредственном использовании объекта в подпорках.

Вот мой код:

class DropDownComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = { dropdownOpen: false };
    const { width } = this.props;
    this.width = width ? { width: `${width}px`,} : {};
    DropDownComponent.propTypes = {};
    this.toggle = this.toggle.bind(this);
    this.getWidth = this.getWidth.bind(this);
  }

  toggle () {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

  getWidth () {
    const { size } = this.props;
    return size ? { width: `${size}px`,} : {};
  };

  render () {
    const { size } = this.props;

    const test = this.getWidth();
    const test2 = { width: `150px`,};
    const test3 = this.width;
    debugger;
    return (
      <Dropdown isOpen={this.state.dropdownOpen} className='ml-2 dropDown-container d-flex' toggle={this.toggle}>
        <DropdownToggle
          caret={!this.props.noPadding}
          tag='span'
          className={!this.props.noPadding ? 'dropdDown-padding dropdDown-colorButton  lightGreenBlue ' : 'dropdDown-colorButton  lightGreenBlue '}
          onClick={this.toggle}
          style={this.getWidth()}
          data-toggle='dropdown'
          aria-expanded={this.state.dropdownOpen}
        >
          {this.props.buttonName}
        </DropdownToggle>
        <DropdownMenu className='dropdDown-itemContainer lightGreenBlue'>
          {this.props.items &&
            this.props.items.map((item, index) => {
              return (
                <div
                  onClick={() => {
                    this.props.onChange(item);
                    this.toggle();
                  }}
                  className={this.props.itemsClassName}
                  style={this.getWidth()}
                  key={index}
                  value={item}
                >
                  {item}
                </div>
              );
            })}
        </DropdownMenu>
      </Dropdown>
    );
  }
}

Как вы можете видеть в отладчике, 3 значения (из функции класса или из класса prop) идентичны, но это работает только тогда, когда я использую вновь созданный объект напрямую:

Можете ли вы объяснить мне, в чем разница и почему она работает с 3 версиями?