Как мне получить вызов API для вызова другого файла?

Question

Я использую API http://aws.random.cat/meow, и это дает мне результат

{"file": "https://purr.objects-us-east-1.dream.io/i/rEJ7q.jpg"}

Файл меняется каждый раз, когда я обновляю вызов API в браузере, который дает мне другое изображение кошки. Например, если я обновлю, это даст мне другой .jpg, например

{"file": "https://purr.objects-us-east-1.dream.io/i/ferbus.jpg"}

Я вызываю api в своем приложении React и хочу сделать случайный снимок кошки после нажатия кнопки. К сожалению, я получаю ту же картинку обратно, когда делаю вызов API. Я помещаю файл в img src, но он не меняется, когда я делаю еще один вызов API.

  componentDidMount() {
    this.getCats();
  }

  getCats = () => {
    axios.get(`http://aws.random.cat/meow`)
      .then(res => {
        let cats = res.data.file;
        console.log(cats)
        this.setState({
          cats
        })
      })
      .catch(err => console.log(err))
  }

  render() {
    return (
      <div>
          <img
            src={this.state.cats}
            alt='cat'
          />
        <button onClick={this.getCats}>
          Click me
        </button>
      </div>
    );
  }

Я ожидаю, что каждый раз получаю новый файл, но вместо этого получаю один и тот же .jpg, когда делаю onClick.