Как по клику на input собирать данные в объект?

Вывожу следующий input:

render () {

    const { id, name, value, adress } = this.props

 return (                             
      <p className="adressPoint"> 
        <input type="radio" className="radio" id={ id } name={ name } value={ value } onChange = { e => this.handleChangeOffice ( e ) } />
        <label htmlFor = { id } > { adress } </label>
      </p>                                    </b>             
    )
  }
}

По клику необходимо собрать объект, в котором будут пары id и value, то есть
{ id: value ,
id2: value2 }.
Изначально была мысль помещать объекты в state, но так как он работает асинхронно, то данные перезаписываются, то есть на момент получения переменной текущего состояния, там находится уже новое состояние. Код обработчика:

handleChangeOffice (e) {

    const { getIdAndOffice } = this.props;

    const id = e.target.name;
    console.log(id);

    const idAndOffice = this.state.radioValue
    console.log(idAndOffice);
  
    idAndOffice[id]= e.target.value;
    console.log(idAndOffice);

    this.setState({
      radioValue: idAndOffice
    });
    console.log(this.state.radioValue)

    this.props.getIdAndOffice(this.state.radioValue)
    console.log(this.props.getIdAndOffice(this.state.radioValue))

  }

Думаю, нужно объявить переменную вне функции-обработчика, куда будут падать данные, но возникает проблема с областью видимости. Пробовал передавать переменную через props от родительского компонента, результат такой же как при работе с состоянием.