React Fizz-Buzz

I am new to React and I have been having an issue with my Fizz-Buzz app. The console output seems to be ok but the display always increments the console number. The outputs are as follows:

Console: 1 /
Display: 2 /
Text: /
Display Text:

Console: 2 /
Display: 3 /
Text: /
Display Text:

Console: 3 /
Display: 4 /
Text: Fizz /
Display Text: Fizz

The code:

class FizzBuzz extends Component {
  constructor() {
    super()
    this.state = {
      number: 1,
      fizzbuzz: ""
    }
    this.onClick = this.onClick.bind(this)
    this.fizzOrBuzz = this.fizzOrBuzz.bind(this)
  }

  onClick() {
    let tempNo = this.state.number + 1
    this.setState({ number: tempNo })
    console.log(this.state.number)
    this.fizzOrBuzz()
  }

  fizzOrBuzz() {
    if ((this.state.number % 3 === 0) && (this.state.number % 5 === 0)) {
      console.log("fizz buzz")
      this.setState({ fizzbuzz: "Fizz-Buzz" })
    } else if (this.state.number % 3 === 0) {
      console.log("fizz")
      this.setState({ fizzbuzz: "Fizz" })
    } else if (this.state.number % 5 === 0) {
      console.log("buzz")
      this.setState({ fizzbuzz: "Buzz" })
    } else {
      this.setState({ fizzbuzz: "" })
    }
    console.log(this.state.number)
  }

  render() {
    return (
      <div className="App">
        <p>Number: {this.state.number}</p>
        <h2>{this.state.fizzbuzz}</h2>
        <button onClick={this.onClick}>Next</button>
      </div>
    )
  }
}

export default FizzBuzz

How can I get the page to render the same number as the console?

function fizzOrBuzz(number) {
  if (number % 3 === 0 && number % 5 === 0) {
    return "Fizz-Buzz";
  } else if (number % 3 === 0) {
    return "Fizz";
  } else if (number % 5 === 0) {
    return "Buzz";
  }
  return "";
}

class FizzBuzz extends Component {
  constructor() {
    super();
    this.state = {
      number: 1,
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({ number: this.state.number + 1 });
  }

  render() {
    return (
      <div className="App">
        <p>Number: {this.state.number}</p>
        <h2>{fizzOrBuzz(this.state.number)}</h2>
        <button onClick={this.onClick}>Next</button>
      </div>
    );
  }
}