I have this issue on a simple react app. I am trying to connect to metamask using a "Connect" button, but when i click that button the console shows an error saying "Error: Invariant failed: No <Web3ReactProvider ... /> found."

As you can see, I added a console to the getLibrary function and it is not logging, so, that function is never called.

import "./App.css";
import React from "react";
import { Web3ReactProvider, useWeb3React } from "@web3-react/core";
import { Web3Provider } from "@ethersproject/providers";
import { InjectedConnector } from "@web3-react/injected-connector";

const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
});

function getLibrary(provider) {
  console.log("getting library") 
  const library = new Web3Provider(provider)
  library.pollingInterval = 12000
  return library
}

const App = () => {
  const { active, account, library, connector, activate, deactivate } =
    useWeb3React();

  async function connect() {
    console.log("connecting");
    try {
      await activate(injected);
    } catch (ex) {
      console.log(ex);
    }
  }

  async function disconnect() {
    try {
      deactivate();
    } catch (ex) {
      console.log(ex);
    }
  }

  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <div className="App">
        {!active ? <button onClick={connect}>Connect</button> : <button onClick={connect}>Disconnect</button>}
      </div>
     </Web3ReactProvider>
 );
}