How to set up my own ganache provider in web3-react?

Question

There are no examples or documentations about setting up my own provider in web3-react library. Can someone provide a simple example about that?

Here is my attempt:

src/connectors/metaMask.js

import { initializeConnector } from "@web3-react/core";
import { MetaMask } from "@web3-react/metamask";

export const [metaMask, hooks] = initializeConnector(
  (actions) =>
    new MetaMask({ actions, options: { rpc: "http://127.0.0.1:7545" } })  // Is this correct?
);

src/components/Buttons/ConnectButton.jsx

import { useEffect, useCallback } from "react";

import { hooks, metaMask } from "../../connectors/metaMask";

const { useChainId, useAccounts, useIsActive, useProvider, useENSNames } =
  hooks;

export default function ConnectButton() {
  const activeChainId = useChainId();
  const accounts = useAccounts();
  const isActive = useIsActive();

  // auto connect
  useEffect(() => {
    metaMask.connectEagerly().catch(() => {
      console.debug("Failed to connect eagerly to metamask");
    });
  }, []);

  const connect = useCallback(
    async (chainId) => {
      await metaMask.activate(chainId);
    },
    [activeChainId]
  );

  return (
    <>
      {isActive ? (
        <button disabled>{accounts}</button>
      ) : (
        <button onClick={() => connect(5777)}>Connect</button>  // problem here
      )}
    </>
  );
}