Problemas com eventos onClick nos botões usando Next com typescript e tailwindcss

[itamarpambo751]

Estou desenvolvendo um projeto usando next.js^14.0.2, typescript^5 e tailwindcss^3.3.0 e pretendo utilizar o next-auth com mongodb
mas me deparei com um problema louco demais:

              "Os eventos onClick não estão funcionando!!!"

Esse trecho de código aí é o Header

import React, { useState } from 'react'
import { Heart, List, MagnifyingGlass, Truck } from 'phosphor-react'
import { Section } from '..'
import Link from 'next/link'
import { HeaderListLinkList } from './HeaderListLinkList'
import { UserLoggedHeader } from './UserLoggedHeader'
import Image from 'next/image'
import { BsFacebook, BsLinkedin } from 'react-icons/bs'


const links = [
  {
    'url':'/pc-gamer',
    'link':'PC Gamer'
  },
  {
    'url':'/home-office',
    'link':'Home Office'
  },
  {
    'url':'/workstation',
    'link':'Workstation'
  },
  {
    'url':'/periferics',
    'link':'Periferics'
  },
  {
    'url':'/hardware',
    'link':'Hardware'
  }
]

const Header:React.FC = () => {
  const [status, setStatus] = useState(false)

  function handleClick() {
    alert("Click!")
  }

  return (
    <header className="w-[100%] bg-black sticky top-[-60px] z-[5000] header-box-shadow">
      <div className="w-[100%] h-[60px] flex items-center justify-center bg-[#FE093C]">
        <Image 
          src="/assets/img/header.webp" 
          className='object-cover'
          height={1000}
          width={1000}
          alt='logo'
        />
      </div>
      <Section.Content>
        <div className="h-[100px] flex justify-between items-center gap-12 m-auto">
          <section className='flex gap-10'>
            <Link href='/'>
              <Image 
                src="/assets/img/logo1.png" 
                alt="logo" 
                className='pb-1'
                width={170}
                height={170}
              />
            </Link>
            <div className="flex-1 flex justify-center items-center gap-3">
              <div className="flex items-center gap-6 relative">
                <ul className="flex justify-center items-end pt-1 gap-3 relative items-link-list">
                  {links.map((item, i) => (
                    <HeaderListLinkList link={item} key={i}/>
                  ))}                  
                </ul>
                <div className='flex justify-normal items-center gap-2'>
                  <input
                    type="text"
                    placeholder="O que você procura..."
                    className="w-[185px]"
                  />
                    <button className='p-[.4rem]'>
                      <i className='text-[#FFF] text-[1.5rem] font-extrabold'>
                        <MagnifyingGlass />
                      </i>
                    </button>
                </div>
              </div>
              {status ? (
                <UserLoggedHeader />
              ):(
                <div className='ml-auto flex justify-end items-center gap-3 flex-1'>
                  <button
                    onClick={handleClick}
                    className='z-[10000] flex justify-center gap-2 items-center bg-slate-800/50 py-2 pl-2 pr-4 rounded-md'>
                    <i className='text-[1.5rem]'>
                      <BsLinkedin />
                    </i>
                    Linkedin
                  </button>
                  <button
                    onClick={handleClick}
                    className='z-[10000] flex justify-center items-center bg-slate-800/50 text-white rounded-md pr-2'>
                    <Image 
                      src='/assets/img/google-logo.png'
                      alt='google-logo'
                      height={40}
                      width={40}
                    />
                    Entre com Google
                  </button>
                </div>
              )}
            </div>
          </section>
        </div>
      </Section.Content>
    </header>
  )
}

Os botões com a função onClick não estão acionando mas eu já fiz o mesmo tipo de código mas sem o typescript e funcionou lindamente neste repositório repositório.

Nunca havia me deparado com esse problema antes, consigo criar outros projectos com next sem problema mas nesse o erro não some por nada.

Fui até o StackOverflow e tentamos várias coisas aqui stackoverflow.com/question mas não deu nada.