[Bug]: TypeError: Cannot read properties of undefined (reading 'Mainnet')

[JollyGrin]

Prerequisites

• I have checked that @thirdweb-dev/react and the @thirdweb-dev/sdk are on the latest stable version and the bug still exists.
• I have checked existing issues and I was unable to find a duplicate of this.

    "@thirdweb-dev/react": "^2.4.8",
    "@thirdweb-dev/sdk": "^2.3.31",

Optional

• I am willing to contribute a PR that fixes the problem with some guidance.

Describe the bug
When loading the default example in _app.js, it throws an undefined typeerror despite the ChainId being imported and being able to see the class by opening with F12.

import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react'
import { ChakraProvider } from '@chakra-ui/react'
import theme from '../styles/theme'
import Layout from '../components/Layout/Layout'

function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebProvider desiredChainId={ChainId.Mainnet}>
      <ChakraProvider theme={theme}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ChakraProvider>
    </ThirdwebProvider>
  )
}

export default MyApp

TypeError: Cannot read properties of undefined (reading 'Mainnet')
   6 | function MyApp({ Component, pageProps }) {
   7 |   return (
>  8 |     <ThirdwebProvider desiredChainId={ChainId.Mainnet}>
     |                                      ^
   9 |       <ChakraProvider theme={theme}>
  10 |         <Layout>
  11 |           <Component {...pageProps} />
  
TypeError: Cannot read properties of undefined (reading 'Mainnet')
    at eval (webpack-internal:///./pages/_app.js:20:80)
    at Function.__webpack_require__.a (/home/X/github/melodies/.next/server/webpack-runtime.js:106:13)
    at eval (webpack-internal:///./pages/_app.js:1:21)
    at Object../pages/_app.js (/home/X/github/melodies/.next/server/pages/_app.js:42:1)
    at __webpack_require__ (/home/X/github/melodies/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/home/X/github/melodies/.next/server/pages/_app.js:522:39)
    at /home/X/github/melodies/.next/server/pages/_app.js:523:28
    at Object.<anonymous> (/home/X/github/melodies/.next/server/pages/_app.js:526:3)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) {
  page: '/'
}

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Package versions (please complete the following information):

 "dependencies": {
    "@chakra-ui/icons": "^1.1.1",
    "@chakra-ui/react": "^1.6.10",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@thirdweb-dev/react": "^2.4.8",
    "@thirdweb-dev/sdk": "^2.3.31",
    "axios": "^0.27.2",
    "chart.js": "^3.8.0",
    "coda-js": "^4.0.1",
    "ethers": "^5.6.9",
    "next": "12.0.1",
    "react": "17.0.2",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "17.0.2",
    "react-h5-audio-player": "^3.8.4",
    "react-icons": "^4.3.1",
    "react-responsive": "^9.0.0-beta.6",
    "sass": "^1.43.4",
    "swr": "^1.1.0"
  },