現在reactを使ってフロントエンドの開発をしているのですが、Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.というエラーが出るが、どう対処すれば良いか解らず困っており質問させていただきました。

今やろうとしている事を説明させていただきます。
やろうとしていることは、ある複数のデータ(hogeとする)に基づいた画像をクリックしたらポップアップが表示されるという事をしようとしています。
そしてこの画像とポップアップとこれらを表示する大元の画面で三つのコンポーネントを定義しました。

Hoges.js:

import React from "react"
import PropTypes from "prop-types"
import HogeImage from "./HogeImage";
import loadsh from 'lodash';
import Popup from "./Popup";

class Hoges extends React.Component {
  constructor(props) {
    super(props);
    this.show_popup = this.show_popup.bind(this);
    this.state = {
      is_show: false,
      hoge: null
    };
  }

  show_popup(hoge) {
    this.setState({
      is_show: true,
      hoge: hoge
    });
  }

  render () {
    return (
      <React.Fragment>
            {hoges.map((hoge) => (
              <HogeImage hoge={hoge} key={hoge.id} click_function={this.show_popup(hoge)} />
            ))}
        ))}
        <Popup hoge={this.state.hoge} is_show={this.state.is_show} />
      </React.Fragment>
    );
  }
}

Hoges.propTypes = {
  hoges: PropTypes.array
};
export default Hoges

HogeImage.js:

import React from "react"
import PropTypes from "prop-types"

class HogeImage extends React.Component {
  render () {
    return (
      <React.Fragment>
          <div onClick={this.props.click_function}>
            <img src={this.props.hoge.url} />
          </div>
      </React.Fragment>
    );
  }
}



HogeImage.propTypes = {
  hoge: PropTypes.object,
  click_function: PropTypes.func,
};

export default HogeImage

Popup.js

import React from "react"
import PropTypes from "prop-types"

class Popup extends React.Component {
  render() {
    return (
      <div>
        { this.props.is_show ?
          <div className='popup'>
            <div className='popup_inner'>
              <img src={this.props.hoge.url} />
            </div>
          </div>
          :null }
      </div>
    );
  }
}

Popup.propTypes = {
  hoge: PropTypes.object,
  is_show: PropTypes.bool
};
export default Popup

この様に書いたのですが、Hogesの辺りでエラーが出ている様です。

ここで質問なのですが、どうすればこのエラーを解消できるでしょうか？
またやや主旨から逸れますが、要件に基づいて上記のソースの様に設計したのですが、設計は問題ないでしょうか？

ご回答お待ちしております。