Warning: Functions are not valid as a React child – How to properly call functions in a child component?

// Parent Component

const handleViewPackage = (itemId) => {
  const currentItem = packageLists.content.find((e) => e.id === itemId);
  dispatch(
    openUpdatePackageModal({ isOpen: true, packageData: currentItem })
  );
};
    const manageListsItems = packageLists.content && packageLists.content.length > 0
    ? packageLists.content.map((item) => ({
      id: item.id,
      name: item.divisionName,
      division: item.divisionName,
      status: item.packageStatus,
      session: item.durationTime + " " + item.durationType,
      cost: item.cost,
      imageUrl: getImageOnDivisionName(item.divisionName),
      action: () => handleViewPackage(item.id),
    }))
  : [];


// Child Component
 
    function ChildComponent({ item }) {

    const handleAction = () => {

    item.action(); 
    };

    return (

    <li onClick={handleAction}></li>

    );

}

While refreshing the page, I’m facing the warning: “Functions are not valid as a React child.” This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.