Web3Modal error on implementing WalletConnect in React.js / Next

Question

I'm trying to implement WalletConnect in my project using the exact code provided in the documentation using Wagmi library. https://docs.walletconnect.com/web3modal/nextjs/about?platform=wagmi

While the application compiles in Typescript it throws a warning on the browser.

TypeError: Class extends value # is not a constructor or null at file:///Users/jimi/Documents/web-app/node_modules/lit/node_modules/@lit/reactive-element/node/reactive-element.js:1:1000

Can someone please explain exactly what is the issue here and how could I resolve this. I'm using these libraries versions.

"dependencies": {
        ...
        "@web3modal/wagmi": "3.3.2",
        "next": "13.5.6",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "typescript": "5.3.2",
        "viem": "^1.13.1",
        "wagmi": "^1.4.2"
        ...
    }

After debugging the error is thrown where it creates the wagmiConfig.

const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })