Looking to use contract.on in react

[randometh]

const funcExample = () => {
  contract.on("Transfer", async (event) => { 
    const tx = await provider.getTransaction(event.transactionHash)    
    const inputData = tx.data
    const decodedData = abiDecoder.decodeMethod(inputData)

    let variable1 = decodedData['params'][3]
    let variable2 = decodedData['params'][0]

    console.log(variable1.name)
    console.log(variable2.value)
  })
}

I have this contract.on async event wrapped inside of an arrow function. I was using this originally in node js and would like to move it over to react. The console.logs work as expected but I am unsure on how to return these variables and render them into the react component. When the variables are returned as an object, destructured and eventually rendered indiviudally I get back that the first variable in my destructre statement is undefined. I believe I would have to set state somehow outside of the contract.on event but am unsure. Any help is appreciated.

[JoviDeCroock]

function useTransfer(contract) {
  const [transaction, setTransaction] = useState();
  
  useEffect(function() {
    contract.on("Transfer", async (event) => { 
      const tx = await provider.getTransaction(event.transactionHash)    
      const inputData = tx.data
      const decodedData = abiDecoder.decodeMethod(inputData)
  
      let variable1 = decodedData['params'][3]
      let variable2 = decodedData['params'][0]
  
      setTransaction({ variable1, variable2 })
    })
  }, [contract])
}

I think this could do the trick, it's some pseudo-code feel free to refine appropriate to your usecase :)

[randometh]

Ohh okay this makes sense. Would I have to destructure { variable1, variable2 } after setting it too useTransfer() and then I would be able to render it inside of the component?
Also wouldnt transaction need to be passed into the useEffect array dependency with contract?

[JoviDeCroock]

I mean, all of these things are based on however you want to use this 😅 you can just return the state from this custom hook and pass in the contract or transaction however you like it