Chakra v3 | EP 103 | PlatformIconList.tsx=> as={iconMap[platform.slug]

[MajidRB]

React.Children.only expected to receive a single React element child.
The above error occurred in the <Styled(svg)> component:

in this peace of code:

{platforms.map((platform) => (
          <Icon
            key={platform.id}
            as={iconMap[platform.slug]}
            color="gray.500"
          /> )}

i encountered those errors. so i tried so many different ways to debugging.
even AI couldn't help me at first!!

two days i spent time on this! at last i was certain the problem was in this part:
as={iconMap[platform.slug]}

with help of AI (GPT)
i could figure this out:

{platforms.map((platform) => (
          <Icon key={platform.id}>
            {iconMap[platform.slug] ? (
              React.createElement(iconMap[platform.slug])
            ) : (
              <BsGlobe />
            )}
          </Icon>
        ))}