Quick Start Error: Required stack

Hello, I followed the quickstart for react tutorial, but I'm getting an error on app start:
![Screenshot_1](https://user-images.githubusercontent.com/64593022/179858190-c1c9c4bd-a67b-4030-85de-ab6f36ac77cc.png)



_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>
     
```
  



Navigation Menu

Uh oh!

Quick Start Error: Required stack #108

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

Quick Start Error: Required stack #108

Description

Activity

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions