Setup and signing web3 client-browser with matic.js

hello im trying to use matic.js for bridging, since the examples only provide for node.js, I’m struggling to use it on client browser(like react)? because it will need metamask/other wallet interaction, and cannot use HDWallet, and Im not sure how do I setup this matic.js on client-browser

so I initialize Posclient first

import {
  POSClient,
  setProofApi,
  use,
  // MaticPOSClient,
} from "@maticnetwork/maticjs"
import { Web3ClientPlugin } from "@maticnetwork/maticjs-web3";
import { useWeb3React } from "@web3-react/core";
  use(Web3ClientPlugin)
...


  const mainWeb3 = new Web3("https://goerli.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161")
  const maticWeb3 = new Web3("https://rpc-mumbai.maticvigil.com")
  const { account, provider, chainId } = useWeb3React();

  const posClient = async () => {
    const posClientx = new POSClient()

    return posClientx.init({
      network: "testnet",
      version: "mumbai"

      log: true,
      child: {
        provider: maticWeb3,
        defaultConfig: {
          from: account,
        },
      },
      parent: {
        provider: mainWeb3,
        defaultConfig: {
          from: account,
        },
      },
    })
  }

then I this functionHandler for my button

const exitERC721 = async () => {
  try {

    const client = await posClient()
  
    // const erc721Token = client.erc721(pos.child.erc721) // mumbai_address for current withdrawBatch
    const erc721Token = client.erc721( "0x69db62d4af0039f7643380549430e90f295235c0" )

    try {
      const result = await erc721Token.withdrawStartMany(["1"],)

      const txHash = await result.getTransactionHash()
      console.log("txHash", txHash)
      const receipt = await result.getReceipt()
      console.log("receipt", receipt)
    } catch (error) {
      console.log(error, "errorss")
    }
    ```
    
but it's not working since i'm not sure  how to sign the transaction properly