Incoming Webhooksで、作成したフォームで入力された値をslackに表示させたい。

Question

前提・実現したいこと

slackのincoming webhooksを用いて、自分で作ったreactのアプリの中のフォームで入力された値を、slackの指定のチャンネルで表示するようなものを実現したいです。

該当のソースコード

formのコンポーネントファイルの特にwebhooks関連の記述がされている付近のコードをいかに記載します。

    submitForm = () => {
      const name = this.state.name;
      const email = this.state.email;
      const description = this.state.description;

      const payload = {
        text: 'お問い合わせがありました\n' + 
              'お名前:' + name + '\n' +
              'Email:' + email + '\n' +
              'お問い合わせ内容:\n' + description 
      }

      const url = 'https://hooks.slack.com/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX'

      fetch(url, {
        method: 'POST',
        body: JSON.stringify(payload)
      }).then(() => {
        alert('送信が完了しました。追ってご連絡いたします!')
        this.setState({
          name: "",
          email: "",
          description: ""
        })
        return this.props.handleClose()
      })

    }

const url に関して伏せていますが、きちんとapiの方で許可して作成されたurlを記述しています。

試したこと

curlコマンドで、メソッドなどを指定してコンソールで実行すると、slackにメッセージが表示されることを確認しました。

curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX
Content-type: application/json

補足情報

YouTubeの動画を参考に進めているのですが、参考にしている動画が公開された後に、webhooksの使い方が変わった(?)っぽいのですが、新しい方法と動画の方法両方試したのですが、うまくいきませんでした。

ちなみに新しい方法は、slack apiのページで、appを作成して、そのappのなかでwebhooksをインストールしてチャンネルを指定して、という方法です。
古い方法とは、app directoryでwebhooksを選択して、チャンネルを指定するというものです。

また、このwebhooks以外の部分でアプリケーションのエラーなどはなく、正常に動作しており、問題のフォームの部分も、情報の入力、送信はできます（ただ、slackに届かないため、入力した値がどこかにいってしまいます。）

もし、必要な情報があれば補足します。

長文失礼いたしました、ご回答お待ちしております。

Answer 1

以下、上記では記載していなかったものの、同じファイルの下の方のrender()にてミスがありました。

<Button onClick={this.submitForm} color="primary" autoFocus>送信する</Button>

上記のコードのonClickメソッドが正解なのですが、this..props.handleCloseとしていたため、ただ、フォームを閉じて終わっていた。