How to call/send to a deposit function on a smart contract using ethers.js and react.js?

Question

I am using ethers and react for my dApp. The smart contract I am using has a deposit function and a withdraw function. I got the withdraw function working from my front end, but the deposit function takes two parameters: address and payable amount. I can interact with the smart contract on Mumbai polygon scan without any problems

How can I make it so the user enters an amount in an input field, clicks on an "Invest"-button and then needs to accepts the deposited amount with MetaMask, calling invest()?

I have been stuck here for a long time. Any help is appreciated.

Here is the solidity function I’m trying to interact with:

function invest(address _ref) public payable{
        if (_invest(msg.sender, _ref, msg.value)) {
            emit OnInvest(msg.sender, msg.value);
        }
    }
 

Here is my working code in Next.js for the withdraw function that takes no parameters:

async function executeWithdraw() {
    if (typeof window.ethereum !== "undefined") {
      const contractAddress = "paste contract address here";
      const abi = [ paste abi here ];
      const contract = new ethers.Contract(contractAddress, abi, signer);
      try {
        await contract.withdraw();
      } catch (error) {
        console.log(error);
      }
    } else {
      console.log("Please install MetaMask");
    }
  }

Answer 1

Update: I got it!

const transaction = await contract.deposit(address, { value: ethers.utils.parseEther("0.1") })

//sends 0.1 eth await transaction.wait()