How to use Wagmi with React?

Could you elaborate on how one might integrate Wagmi, a popular Ethereum and web3 library, with React, a popular JavaScript library for building user interfaces? What steps are involved in setting up Wagmi in a React project? Are there any specific dependencies or configurations that need to be made? Additionally, could you provide an example of how to use Wagmi's features, such as fetching account balances or subscribing to transaction updates, within a React component? Lastly, are there any common pitfalls or challenges that developers should be aware of when working with Wagmi and React?