Reactで連打を防止したい

Question

ご閲覧頂きましてありがとうございます。

Reactで onClick() をした際に、連続クリックを防止したいです。
下記のStackOverflowのように、 disabled をstateで操作してみたのですが
ボタンを2回押さないと対応してくれなかったり、結局連続クリックを防止もできていませんでした。
https://stackoverflow.com/questions/35315872/reactjs-prevent-multiple-times-button-press

react posed のアニメーションで遷移を透明化で代用しています。

ソースコード

// react posed でスクリーン遷移アニメーション
const Screen = posed.div({
  hidden: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
  }
});

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      screen: {
        first: true,
        second: false
      },
  }
  
  // 戻る処理
  _firstBack = event => {
    const screen = this.state.screen;
    screen.first = truw;
    screen.second = false;
    this.setState({
      screen
    });
  };

    return (
      <div className="App">
        <input
          style={{ display: "none" }}
          value={this.state.recipe_id}
          id="recipe_id"
        />
        <Screen
          pose={this.state.screen.first ? "visible" : "hidden"}
        >
        画面1
　　　　　</Screen>
        <Screen
          pose={this.state.screen.second ? "visible" : "hidden"}
        >
        画面2

                <div onClick={this._firstBack}>
                  <span>もどる</span>
                </div>
　　　　　</Screen>

もどるを連続クリックすると、現状画面が重なってしまいます。
こちらの現象を防ぐ方法をご教示いただければと思います。

Comments

[yukkuri]

すいません、java とタグが付いていますが、javascriptの間違いですか？あと、下記のStackOverflow、とありますが、リンクがないように見えるのですが。

[k10a]

ご指摘ありがとうございます。追記および、タグの更新をさせていただきました。