Why is my cursor pointer disabled on <button> after refresh?

Question

I'm trying to build an Uniswap Clone with React & Tailwind CSS, and I have created a "Connect Wallet" button that triggers a Metamask popup to connect wallet.

Everything else seems to be working fine, but when I fully refresh the web application page, my cursor pointer becomes disabled when I hover over the "Connect Wallet" button.** Basically, my cursor stays at the default arrow pointer mode, doesn't change to cursor pointer, and I am unable to click the button.

Image of app in Chrome Browser

Interestingly enough, when I refresh the page and quickly place my mouse over the Connect Wallet button, I am briefly able to click the button and open the Metamask Pop-up as usual. But, when the page is fully refreshed, the cursor goes back to the normal/default arrow pointer, and I am unable to click the button.

Anybody have an idea of what might be causing this, and how I may be able to resolve it?

PS: I have tried to add "cursor-pointer" class to my button. I thought it would force the cursor to change to pointer on hover, but this didn't fix the problem.

Here's my React code block for the button:

const WalletButton = () => {
  const [rendered, setRendered] = useState('');

  const {ens} = useLookupAddress();
  const {account, activateBrowserWallet, deactivate} = useEthers();
  
  return (
    <button
      onClick={() => {
        if (!account) {
          activateBrowserWallet();
        } else {
          deactivate();
        }
      }}
      className={styles.walletButton}
    >
      {rendered === "" && "Connect Wallet"}
      {rendered !== "" && rendered}
    </button>
  );
};

export default WalletButton

Here are the tailwind CSS styles that are currently applied to the button:

// WalletButton
  walletButton:
    "bg-site-pink border-none outline-none px-6 py-2 font-poppins font-bold text-lg text-white rounded-3xl leading-[24px] hover:bg-pink-600 transition-all",

Answer 1

I found a solution to this. In fact, this issue is very similar to this:

https://stackoverflow.com/a/70807924/20237510

I ended up using Fix #2 in the solution provided in the thread above:

iframe {
  pointer-events: none;
}

Hope that helps someone else!