Reactアプリでクリック時のskyway-jsのコールバックが実行されない

Question

前提・実現したいこと

Reactとskyway-jsでWebRTCを使ったアプリを作っているのですが、Reactのコンポーネントをクリックしたときに関数を実行し、その中でskyway-jsのopenを実行して、コールバックを受け取りたい。

困っていること

実現したい事をそのままコードに書いてみましたが、コールバック関数が実行されないです。
また、なぜこれだとできないのか知りたいです。

該当のソースコード

// jsx
import React from 'react';
import Peer from 'skyway-js';


// keyは伏せさせていただきます。
const peer = new Peer({
  key: 'xxxxx',
  debug: 3
});

class App extends React.Component {
  constructor() {
    super();

    peer.on('open', () => {
      // 実行される
      console.log(peer.id)
    });
  }

  func() {
    peer.on('open', () => {
      // 実行されない
      console.log(peer.id)
    });
  }

  render() {

    return (
      <div className="container">
        <button type="button" onClick={() => this.func()}>
          ボタン
        </button>
      </div>
    )
  }
}

export default App;

試したこと

Reactのライフサイクル(constructorやcomponentDidMount)で該当のpeer.on('open', () => {console.log(peer.id)});を実行すると問題なくコールバックが実行され、logにpeer.idが出力されます。