React:yвеличить предыдущее состояние на 1
 

При клике на кнопку изменение состояния происходит со второго клика ,подскажите что не так,почему при первом клике не изменяет.

export default class App extends Component {
  state = {
    images: [],
    isLoading: false,
    error: null,
    query: '',
    page: 1,
  };

  componentDidMount() {
    this.fetchImages();
  }

  fetchImages = (query, page) => {
    this.setState({
      isLoading: true,
    });

    fetchImg(query, page)
      .then(({ data }) =>
        this.setState({
          images: mapper(data.hits),
        }),
      )
      .catch(error => this.setState({ error }))
      .finally(() => this.setState({ isLoading: false }));
  };

  handleChange = e => {
    const { value } = e.target;

    this.setState({
      query: value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();

    const { query, page } = this.state;
    this.fetchImages(query, page);

    this.setState({ query: '' });
  };

loadMore = () => {
    this.setState(state=> ({
      page: state.page + 1,
    }));

    const { query, page} = this.state;

    fetchImg(query, page).then(({ data }) =>
      this.setState(state => ({
        images: [...state.images, ...mapper(data.hits)],
      })),
    );

    console.log(page);

  };

render() {
    const { images, error } = this.state;
    return (
      <div>
        {error && <ErrorNotification text={error.message} />}
        <Searchbar onChange={this.handleChange} onSubmit={this.handleSubmit} />
        {images.length > 0 && (
          <ImageGallery images={images} onClick={this.loadMore} />
        )}
      </div>
    );
  }
}