How to pass a functional component as props from a server component to a client component

Question

I have marked <Bar /> component to a Client Component to use the Framer Motion which also uses the React Icons from a separate data.ts file. The <Bar /> component is as follows:

"use client";

import { ISkill } from "@/types";
import React from "react";
import { motion } from "framer-motion";

export default function Bar({ data: { name, level, Icon } }: { data: ISkill }) {
  const variants = {
    initial: {
      width: 0,
    },
    animate: {
      width: level,
      transition: {
        duration: 0.4,
        type: "spring",
        damping: 10,
        stiffness: 100,
      },
    },
  };

  return (
    <div className="text-white my-2 bg-gray-300 dark:bg-dark-300 rounded-full">
      <motion.div
        className="px-4 py-1 flex items-center rounded-full bg-gradient-to-r from-green to-blue-400"
        style={{ width: level }}
        variants={variants}
        initial="initial"
        animate="animate"
      >
        <Icon className="mr-3" />
        {name}
      </motion.div>
    </div>
  );
}

where the ISkill interface is like this:

import { IconType } from "react-icons";

export interface ISkill {
  name: string;
  level: string;
  Icon: IconType;
}

The parent is like this:

<div className="my-2">
     {languages.map((language) => (
          <Bar data={language} key={language.name} />
     ))}
 </div>

However, the parent page is a Server Component and the page is not loading while showing an error-

⚠️Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

I am totally a novice at next.js, therefore, cannot figure out how to solve this problem. React Icons are all functional components as far as I know. The data.ts file look like this:

import { FaPython} from "react-icons/fa";
import { BiCodeCurly } from "react-icons/bi";
import { ISkill } from "@/types";

export const languages: ISkill[] = [
  {
    name: "Python",
    level: "40%",
    Icon: FaPython,
  },
  {
    name: "C",
    level: "90%",
    Icon: BiCodeCurly,
  },
]