React img не сразу меняется при изменении src. Как я могу это исправить?

У меня базовый <img> с src.

<img src = {src} />

Если я изменю src с, скажем, /1.jpg на /2.jpg, а загрузка нового образа займет 1 секунду, React продолжит показывать /1.jpg до тех пор, пока не загрузится новый образ.

Я хочу, чтобы старое изображение было отброшено во время загрузки нового. (например, дисплей: нет)

Есть идеи, как этого добиться? В идеале без условного рендеринга, потому что мне еще нужно использовать onLoad и onError

Обновлено: вот еще код. Это немного сложнее, чем мой вопрос, но я просто пытаюсь добавить к изображению некоторую загрузку и состояние ошибки.

У меня есть кнопка, которая вызывает это onClick

this.props.history.push('/${page + 1}');

Это компонент изображения, где src основан на page из URL-адреса.

import React, { Component } from 'react';
import CenteredLoading from 'components/loading/CenteredLoading';

type Props = { src: string };

type State = {
  status: 'LOADING' | 'LOADED' | 'FAILED',
};

class ImageWithLoader extends Component<Props, State> {
  state = {
    status: 'LOADING',
  };

  handleImageLoad = () => {
    this.setState({ status: 'LOADED' });
    console.error('image loaded');
  };

  handleImageError = () => {
    this.setState({ status: 'FAILED' });
    console.error('image error');
  };

  render() {
    const { src, ...otherProps } = this.props;
    const { status } = this.state;

    return (
      <React.Fragment>
        <img
        {...otherProps}
        onLoad = {this.handleImageLoad}
        onError = {this.handleImageError}
        src = {src}
        />

        {status === 'LOADING' && <CenteredLoading />}
        {status === 'FAILED' && <p>error</p>}
      </React.Fragment>
    );
  }
}

export default ImageWithLoader;