Перезапрашивать данные по клику на кнопки

По клику на одну из кнопок необходимо делать запрос на сервер и отображать новые данные (для примера отобразил title). Проблема в том, что идет много запросов и контент начинает дёргаться, нормально не отображается https://codesandbox.io/s/requests-test-5430h?file=/src/App.js:0-1439

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      contentType: "photos"
    };
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount() {
    this.fetchData("https://jsonplaceholder.typicode.com/photos/1");
  }

  fetchData(query) {
    fetch(query)
      .then((response) => response.json())
      .then((json) => this.setState({ data: json }));
  }

  render() {
    const { data, contentType } = this.state;

    contentType === "albums" &&
      this.fetchData("https://jsonplaceholder.typicode.com/albums/1");
    contentType === "posts" &&
      this.fetchData("https://jsonplaceholder.typicode.com/posts/1");
    return (
      <div className="App">
        <div>
          <input
            type="button"
            value="photos"
            onClick={(e) => this.setState({ contentType: e.target.value })}
          />
          <input
            type="button"
            value="albums"
            onClick={(e) => this.setState({ contentType: e.target.value })}
          />
          <input
            type="button"
            value="posts"
            onClick={(e) => this.setState({ contentType: e.target.value })}
          />
        </div>
        <section>
          <h2>Content:</h2>
          <div>{data.title}</div>
        </section>
      </div>
    );
  }
}