Сумма массива Javascript сначала возвращает 0

Сильный кошмар, пытающийся вычислить сумму массива (чисел) в ReactJS / State.

Код, который я разместил ниже, работает, если я не использую состояние.

1. По сути, через форму пользователь вводит число, а затем отправляет.
2. То, что вводит пользователь, отслеживается через handleChangeEvent.
3. А затем при handlSubmit число / значение сохраняется в this.state.donated и this.state.sum. Это массивы.

Когда я смотрю на консоль, оба состояния хранят массив чисел. И собирать каждую запись в массив нормально.

Я хочу найти и распечатать сумму этих чисел. Итак, я использую:

// FUNCTION TO CALCULATE TOTAL DONATIONS
const numbers = this.state.sum;
function add(a, b) {
  return a + b;
}
// // TOTAL VALUE OF NUMBERS IN THE ARRAY
const cal = numbers.reduce(add, 0);
console.info('CALC', cal);

Однако проблема, с которой я столкнулся, заключается в том, что я отправляю, например, число 20. Функция суммы, консоль сначала регистрирует 0. Когда я ввожу второй номер, консоль регистрирует первое введенное мной число ...

Что я делаю неправильно? Вот мой полный / соответствующий код:

class App extends React.Component {

  constructor() {
   super();

   this.state = {
     number: '',
     donated: [],
     sum: [],
     total: 0
   };

  this.handleChangeEvent = this.handleChangeEvent.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
 // we need to bind otherwise this is undefined
 }


//HANDLE FUNCTIONS
 handleChangeEvent(e) {
   this.setState({ number: e.target.value }, () => 
   console.info('NUMBER', this.state.number));
 }

 handleSubmit(e) {
   e.preventDefault();
  this.setState({donated: this.state.donated.concat(this.state.number).map(Number)}, () => console.info('DONATED', this.state.donated));
 this.setState({sum: this.state.donated.concat(this.state.number).map(Number)}, () => console.info('SUM', this.state.sum));


 // FUNCTION TO CALCULATE TOTAL DONATIONS
 const numbers = this.state.sum;
  function add(a, b) {
  return a + b;
}

// TOTAL VALUE OF NUMBERS IN THE ARRAY
const cal = numbers.reduce(add, 0);
console.info('CALC', cal);


document.forms['id_form'].reset();
}

render() {

return (
  <main>
    <section className = "section">
      <h1 className = "is-size-2">DONATE FOR A GOOD CAUSE</h1>
      <ProgressBar donated = {this.state.donated} sum = {this.state.sum}/>
      <Form donated = {this.state.donated} handleChangeEvent = {this.handleChangeEvent} handleSubmit = {this.handleSubmit} />
    </section>
  </main>
);
}
}

ReactDOM.render(
<App />,
document.getElementById('root')
);