Установка состояния с объектами из Firebase

У меня проблемы с настройкой состояния компонента в React. Компонент называется «Поиск» и использует реакцию-выбор. Полный компонент находится здесь:

class Search extends React.Component {
  constructor(props){
    super(props);
    let options = [];
    for (var x in props.vals){
      options.push({ value: props.vals[x], label: props.vals[x], searchId: x });
    };
    this.state = {
      inputValue: '',
      value: options
    };
  }

  handleChangeEvent = (value: any, actionMeta: any) => {
    if (actionMeta.action == "remove-value"){
      this.props.onRemoveSearch({ searchId: actionMeta.removedValue.searchId })
    }
    this.setState({ value });
  };

  handleInputChange = (inputValue: string) => {
    this.setState({ inputValue });
  };

  handleSearch = ({ value, inputValue }) => {
    this.setState({
      inputValue: '',
      value: [...value, createOption(inputValue)], // Eventually like to take this out...
    });
    this.props.onSearch({ inputValue });
  }

  handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
    const { inputValue, value } = this.state;
    if (!inputValue) return;
    switch (event.key) {
      case 'Enter':
      case 'Tab':
        this.handleSearch({
          value,
          inputValue
        });
        event.preventDefault();
    }
  };

  render() {
    const { inputValue, value } = this.state;
    return (
        <div className = "search">
            <div className = "search__title">Search</div>
            <Tooltip
              content = {this.props.tooltipContent}
              direction = "up"
              arrow = {true}
              hoverDelay = {400}
              distance = {12}
              padding = {"5px"}
              >
              <CreatableSelect
                className = {"tags"}
                components = {components}
                inputValue = {inputValue}
                isMulti
                menuIsOpen = {false}
                onChange = {this.handleChangeEvent}
                onInputChange = {this.handleInputChange}
                onKeyDown = {this.handleKeyDown}
                placeholder = "Add filters here..."
                value = {value}
              />
            </Tooltip>
        </div>
    );
  }
}

module.exports = Search;

Вы, наверное, заметили странную вещь, которую я делаю в функции конструктора. Это потому, что мне нужно использовать данные из моей базы данных firebase, которая находится в объектной форме, но response-select ожидает массив объектов со свойством «значение» и «метка». Вот как выглядят мои данные:

Чтобы восполнить пробел, я написал цикл for-in, который создает массив (называемый параметрами) и передает его в state.value.

Проблема: поскольку я использую этот цикл «for in», React не распознает, когда свойства были изменены. Таким образом, компонент response-select не перерисовывается. Как передать эти реквизиты (либо изменить их внутри родительского компонента, либо в компоненте поиска), чтобы компонент поиска повторно отобразил?