cookie import failure nextjs component calling server action

Error: 
  × You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/
  │ react-essentials#server-components
  │ 
  │ 
   ╭─[P:\web-app\lib\appwrite.ts:1:1]
 2 │ import { cookies } from 'next/headers';

 useEffect(() => {
    const fetchData = async () => {
      try {
             const model = await loadEmployees()
             setEmployees(model.documents as Employee[])          
        }        
      } catch (error) {
        log.error("Error fetching data SERVER ACTION:", error);
      }
    }
    fetchData();
   
  }, [])