Quick Start Error: Required stack

Hello, I followed the quickstart for react tutorial, but I'm getting an error on app start: Screenshot_1

_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react"

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <ThirdwebProvider desiredChainId={ChainId.Mainnet}>
        <Component {...pageProps} />
      </ThirdwebProvider>
    </>

  )
}
export default MyApp

index.tsx

import { Fragment, useEffect } from "react" import { ChevronDownIcon, RefreshIcon } from "@heroicons/react/solid" import Head from "next/head" import Header from "../components/Header" import TabBox from "../components/TabBox" import { Menu, Transition } from '@headlessui/react' import metamask from '../public/metamask.png' import phantom from '../public/phantom.png' import Image from 'next/image' import Profile from "../components/Profile" import { useAddress, useDisconnect, useMetamask } from "@thirdweb-dev/react";

export default function Home() { const connectWithMetamask = useMetamask()

return (
  <>
  <Head>
    <title>Login | web3</title>
  </Head>
  <div className="h-screen flex">
    <div className="mx-auto my-32 md:m-auto space-y-12">
      <h1 className="text-3xl md:text-5xl font-bold text-slate-300 flex mx-auto justify-center">
        Hello, web3
      </h1>
      <Menu as="div" className="relative inline-block text-left">
        <div>
          <Menu.Button 
            className="px-8 py-4 bg-slate-300 bg-gradient-to-r from-slate-500 rounded-xl flex justify-center font-bold w-[255px] md:w-[355px] hover:bg-slate-500 transition duration-300">

            {/* <RefreshIcon className="animate-spin w-8 h-8 text-slate-900" aria-hidden="true"/>  */}
            'Connect your wallet'

              {/* <ChevronDownIcon
                className="ml-4 md:ml-8 -mr-1 h-6 w-6 text-slate-800 hover:text-violet-100"
                aria-hidden="true"
              /> */}

          </Menu.Button>            
        </div>
        <Transition
          as={Fragment}
          enter="transition ease-out duration-100"
          enterFrom="transform opacity-0 scale-95"
          enterTo="transform opacity-100 scale-100"
          leave="transition ease-in duration-75"
          leaveFrom="transform opacity-100 scale-100"
          leaveTo="transform opacity-0 scale-95"
        >
          <Menu.Items className="w-[255px] md:w-[355px] absolute right-0 mt-2 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
            <div className="px-1 py-1 space-y-2">
              <Menu.Item>
                <div
                  onClick={connectWithMetamask} 
                  className="flex items-center space-x-4 px-2 hover:bg-slate-500 transition duration-500 rounded-xl">
                  <img src={metamask.src} alt="logo metamask" className="w-10 h-10"/>
                  <button
                    className='w-[220px] md:w-[320px] mx-auto text-black font-bold group flex w-full items-center rounded-xl px-2 py-4 text-sm'
                  >
                    Connect with Metamask
                  </button>
                </div>
              </Menu.Item>

thirdweb-dev / react

Quick Start Error: Required stack #108