Unsupported Server Component: {...}

Question

In Nextjs14, I am using it with WPGraphQL! My footer doesnot want to render, it says unsuported server component type....

import { FaWhatsapp, FaPhone, FaTelegram, FaEnvelope } from 'react-icons/fa';
import { Link } from 'next/link';
export default function Footer() {
  return (
    <div>
        <footer className="fixed bottom-0 left-0 w-full bg-blue-900 shadow-slate-900 text-white p-4 flex justify-between items-center">
    
            <Link className="text-blue-400 mx-2">
              <FaWhatsapp size={24} />
            </Link>
            <Link className="text-green-400 mx-2">
              <FaPhone size={24} />
            </Link>
            <Link className="text-blue-500 mx-2">
              <FaTelegram size={24} />
            </Link>
            <Link className="text-red-500 mx-2">
              <FaEnvelope size={24} />
            </Link>
          
          <div>
            <p className="text-sm">&copy; {new Date().getFullYear()} MK TreeFellers. All rights reserved.</p>
          </div>
        </footer>
      );
    </div>
  )
}
But **when I remove all the imports from react-icons and prepare my own assets, the issue is resolved!** What causes this error because everything is prepared and rendered on the server?

I remove all the imports and it worked fine....if I add "use client" directive, it doesnot solve the issue