Problem framer motion component in NEXTJS - reactjs

Question

I am using NEXTJS and SanityIO. I am getting this error when adding this Framer motion component? "TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component" or it just fails to refresh.
My code causing the problem is below and below the code is a picture of my folder layout. If it is helpful to know, the Header component works if I just render an h1 alone. Any help or feedback is greatly appreciated.
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