无法在react中使用javascript读取null的属性“addEventListener”?

HTML 从服务器。我正在使用 dangerouslySetInnerHTML 现在我想在从服务器传入的HTML中绑定一个click事件,这里是我的代码 https://codesandbox.io/s/angry-shadow-1c4v8?file=/src/App.js

 useEffect(() => {
    const alertFunc = function () {
      alert("-----");
    };
    document.querySelector(".btn").addEventListener("click", alertFunc, false);
    // Specify how to clean up after this effect:
    return function cleanup() {
      document
        .querySelector(".btn")
        .removeEventListener("click", alertFunc, false);
    };
  });