const DynamicFaIcon = dynamic(() =>
    import("react-icons/fa").then(
      (module) => module as unknown as IconType
    )
  )
  const DynamicAiIcon = dynamic(() =>
    import("react-icons/ai").then(
      (module) => module as unknown as IconType
    )
  )

  const [icons, setIcons] = useState<
    (
      | IconType
      | typeof import("react-icons/fa")
      | typeof import("react-icons/ai")
      | null
    )[]
  >([])

  useEffect(() => {
    const iconNames = Object.values(iconMap)

    const loadIcons = async () => {
      const [faModule, aiModule] = await Promise.all([
        DynamicFaIcon,
        DynamicAiIcon,
      ])

      const allIcons = iconNames.map((iconName) => {
        return iconName.startsWith("Fa")
          ? faModule[iconName]
          : iconName.startsWith("Ai")
          ? aiModule[iconName]
          : null
      })
      setIcons(allIcons)
    }
    loadIcons()
  }, [])

const Icon = icons.find((icon) => (icon as { name: string }).name === iconMap[title]) as IconType
return(<div className="relative">
          {Icon ? <Icon /> : "Loading..."}
       </div>)