我正在使用NEXTJS和SanityIO。添加此成帧器运动组件时出现此错误？“类型错误：createContext只能在客户端组件中使用。请在文件顶部添加“use client”指令以使用它。阅读更多信息：https://nextjs.org/docs/messages/context-in-server-component"或它只是无法刷新。
我的代码导致的问题是下面和下面的代码是我的文件夹布局的图片。如果它是有帮助的知道，头组件的工作，如果我只是呈现一个h1单独。任何帮助或反馈是非常感谢。

import React from 'react'
    import { SocialIcon } from 'react-social-icons';
    import {motion} from "framer-motion";

     type Props = {}

        function Header({}: Props) {
      return (
        <header className="sticky top-0 p-5 flex items-start justify-between max-w-7xl mx-auto z- 
    20 xl:items-center">
            <motion.div 
             initial={{
               x:-500,
              opacity:0,
            scale:0.5
           }}
            animate={{
            x:0,
            opacity: 1,
            scale: 1
         }}
         transition={{
            duration:1.5,
         }}
         className="flex flex-row items-center">
            {/*Social Icons*/}
            <SocialIcon
                url="https://www.youtube.com"
                fgColor="gray"
                bgColor="transparent"
            />
                 <SocialIcon
                url="https://www.youtube.com"
                fgColor="gray"
                bgColor="transparent"
            />
                 <SocialIcon
                url="https://www.youtube.com"
                fgColor="gray"
                bgColor="transparent"
            />
        </motion.div>

        <motion.div
         initial={{
            x: 500,
            opacity: 0,
            scale: 0.5,
         }}
         animate={{
            x:0,
            opacity:1,
            scale:1,
         }}
         transition={{duration:1.5}}
        
        
            className="flex flex-row items-center text-gray-300 cursor-pointer">
           <SocialIcon
                className="cursor-pointer"
                network="email"
                fgColor="gray"
                bgColor="transparent"
            />

            <p className="uppercase hidden md:inline-flex text-sm text-gray-400"> Get In Touch</p>

           </motion.div>
      </header>
     )
    }

    export default Header