Reactjs 无法在下一个标头上使用 React hooks

这是我的网站https://atmos-app-p6hi7.ondigitalocean.app/我需要减少页眉上的填充，当用户滚动时，我做这个组件:

    import Link from 'next/link'
import Image from 'next/image'
import { GET_HEADER, getInfo } from '@/api/api'
import Submenu from './parts/Submenu'
import Burguer from './parts/Burguer'
import HeaderContainer from './parts/HeaderContainer'

export default async function Header() {
  const info = await getInfo(GET_HEADER)
  if (info === null || info === undefined) return null
  const dataHead = info.data?.header.data.attributes.links || []

  return (
    <HeaderContainer>
      <ul className='flex lg:hidden justify-between px-4 items-center'>
        <Link href='/'>
          {' '}
          <Image
            src='/images/logo.svg'
            width='140'
            height='140'
            alt='LogoHeader'
          />{' '}
        </Link>
        <Burguer dropdown={dataHead} />
      </ul>
      <ul className='hidden lg:flex justify-around items-center px-6'>
        {dataHead.map((link, i) => {
          const { title, href, index, dropdown, external_link } = link

          if (index) {
            return (
              <Link key={i} href={href}>
                {' '}
                <Image
                  src='/images/logo.svg'
                  width={150}
                  height={150}
                  alt='LogoHeader'
                />{' '}
              </Link>
            )
          }

          if (dropdown.length > 0) {
            return <Submenu key={i} title={title} dropdown={dropdown} />
          }

          return (
            <Link
              key={i}
              href={href ? href : ''}
              className='text-white hover:text-gray-300 transition duration-300'
              target={external_link ? '_blank' : '_self'}
            >
              {title}
            </Link>
          )
        })}
      </ul>
    </HeaderContainer>
  )
} 

在HeaderContainer上，我使用了一些react 挂钩，如下所示:

'use client'
import { useState, useEffect } from 'react'

const HeaderContainer = ({ children }) => {
  const [scrolled, setScrolled] = useState(false)
  console.log(window.scrollY)

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 50) {
        setScrolled(true)
      } else {
        setScrolled(false)
      }
    }

    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <header
      className={`${
        scrolled ? 'py-10 lg:py-8' : 'py-16 lg:py-14'
      } fixed top-[-0.25rem] lg:top-0 lg:ml-[-1rem] bg-[url(/images/menu_desktop.svg)] bg-no-repeat text-xl bg-cover bg-center w-screen lg:w-[105%] z-[500]`}
    >
      <nav className='container mx-auto'>{children}</nav>
    </header>
  )
}

export default HeaderContainer

但它给出了以下错误:"未处理的运行时错误 错误:客户端组件上尚不支持异步/等待，仅服务器组件上支持.此错误通常是由于在最初为服务器编写的模块中意外添加了"Use Client"而导致的.

我不知道为什么，当我需要使用服务器端时，我只在子元素身上使用客户端，而不是在父母身上.有人知道如何实现我的目标吗？