fix(ui): type error in SettingsUpsellMenuItem

Author: psychedelicious

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx

@@ -49,8 +49,8 @@ const SettingsMenu = () => {
       <Portal>
         <MenuList>
           <MenuGroup title={t('upsell.professional')}>
-            <SettingsUpsellMenuItem menuText={t('upsell.inviteTeammates')} menuIcon={PiUsersBold} />
-            <SettingsUpsellMenuItem menuText={t('upsell.shareAccess')} menuIcon={PiShareNetworkFill} />
+            <SettingsUpsellMenuItem menuText={t('upsell.inviteTeammates')} menuIcon={<PiUsersBold />} />
+            <SettingsUpsellMenuItem menuText={t('upsell.shareAccess')} menuIcon={<PiShareNetworkFill />} />
           </MenuGroup>
 
           <MenuGroup title={t('common.communityLabel')}>

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx

@@ -1,14 +1,14 @@
 import { Flex, Icon, MenuItem, Text, Tooltip } from '@invoke-ai/ui-library';
+import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { IconType } from 'react-icons';
 import { PiArrowUpBold } from 'react-icons/pi';
 
-export const SettingsUpsellMenuItem = ({ menuText, menuIcon }: { menuText: string; menuIcon: IconType }) => {
+export const SettingsUpsellMenuItem = ({ menuText, menuIcon }: { menuText: string; menuIcon: ReactElement }) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip label={t('upsell.professionalUpsell')} placement="right" gutter={16}>
-      <MenuItem as="a" href="http://invoke.com/pricing" target="_blank" icon={menuIcon({})}>
+      <MenuItem as="a" href="http://invoke.com/pricing" target="_blank" icon={menuIcon}>
         <Flex gap="1" alignItems="center" justifyContent="space-between">
           <Text>{menuText}</Text>
           <Icon as={PiArrowUpBold} color="invokeYellow.500" />