'Component is not mounted' error when calling connect() from an onClick handler

[GAlcaraz]

EDIT: Seems to be an issue with React 18. Possible workaround would be to remove the Reac.StricMode component wrapping the app (not recommended).

Hi. I'm getting the following error when calling the connect() function from anything other than the initial useEffect hook:

I tested this just using an out-of-the-box create-react-app, so I'm not sure what's going on. Seems something really simple to need to add a workaround. Using React 18.2.

import logo from "./logo.svg";
import "./App.css";
import { useMetamask } from "use-metamask";
import { ethers } from "ethers";

function App() {
  const { connect } = useMetamask();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button
          onClick={async () => {
            await connect(ethers.providers.Web3Provider, "any");
          }}
        >
          Click me!
        </button>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { MetamaskStateProvider } from "use-metamask";

import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <MetamaskStateProvider>
      <App />
    </MetamaskStateProvider>
  </React.StrictMode>
);