react code output is 1 and not 3 - understanding question

Question

Extremely sorry if this isn't the place to be asking questions of sort but I'm trying to understand this code and further understand how react work - if possible and this kind of question isn't proper to this forum i would love a reference so i could understand this issue.

import React from 'react';

export class Test extends React.Component {
  state = {
    counter: 0,
  };

  componentDidMount() {
    this.test();
  }

  test = () => {
    this.setState({ counter: this.state.counter + 1 });
    this.setState({ counter: this.state.counter + 1 });
    this.setState({ counter: this.state.counter + 1 });
  };

  render() {
    console.log('this.state.counter:', this.state.counter);

    return <span>{this.state.counter}</span>;
  }
}

Why in this case, the output is 1 and not 3?