How to make connection and get provider to call methods on JSON contract?

[myhendry]

Hi. Presently, I am using web3-modal and is trying to replace with web3-react.

as seen in my code snippet below, my loadContract function works fine. Since no need to use the wallet, i guess that's y I don't need to change my code

however, i have some issue in my setGreeting function. How should I replace those line of codes headline USING WEB3-MODAL and replace with web3-react portion in order to interface with my greeterContract?

Thanks

 //#region Eth | LoadGreeting
  useEffect(() => {
    loadGreeting();
  }, []);

  const loadGreeting = async () => {
    try {
      setIsLoading(true);
      const provider = new ethers.providers.JsonRpcProvider();

      const greeterContract = new ethers.Contract(
        Greeter.address,
        Greeter.abi,
        provider
      );

      const res = await greeterContract.greet();
      setGreeting(res);
      setIsLoading(false);
    } catch (error) {
      console.log("loadGreeting Error", error);
      setIsLoading(false);
    }
  };
  //#endregion

  //#region Eth | SetGreeting
  //todo
  const setNewGreeting = async (newMessage: string) => {
    try {
      setIsLoading(true);
      	/*
            USING WEB3-MODAL

               const web3Modal = new Web3Modal();
               const connection = await web3Modal.connect();
               const provider = new ethers.providers.Web3Provider(connection);

               --> How should I replace above line of codes and replace with web3-react portion in order to interface with my greeterContract?
       */

        ??? web3-react codes
	const signer = library.getSigner();

	const greeterContract = new ethers.Contract(
	  Greeter.address,
	  Greeter.abi,
	  signer
	);

      console.log("newMessage", newMessage);


      setIsLoading(false);
    } catch (error) {
      console.log("setNewGreeting Error", error);
      setIsLoading(false);
    }
  };
  //#endregion

[myhendry]

I manage to get it to work. I simply remove those web3-modal line of codes

hope below code is useful to others. If there's any issues identified in my codes below, feel free to point out and I will amend for benefit of others if they are referencing this code. Thanks

const setNewGreeting = async (newMessage: string) => {
    try {
      setIsLoading(true);

      const signer = library.getSigner();
      const greeterContract = new ethers.Contract(
        Greeter.address,
        Greeter.abi,
        signer
      );

      const transaction = await greeterContract.setGreeting(newMessage);
      await transaction.wait();
      setGreeting(newMessage);

      setIsLoading(false);
    } catch (error) {
      console.log("setNewGreeting Error", error);
      setIsLoading(false);
    }
  };