Nice article which gives some basic understanding of connecting to web3 from regular react ui.
One thing to notice - combining yarn and npm might lead to some potential issues. For me all worked like a charm when I replaced this
yarn add ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers
by this
npm i ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers