استفاده از Icon با استفاده از نام آیکن

با عرض سلام و وقت بخیر خدمت شما استاد بزرگوار و گرامی

در بخش افزودن آیکن های شبکه های اجتماعی به پروژه شما دستور فرمودین که این بخش رو با استفاده از حلقه ها بازنویسی کنیم، من کل کار رو انجام دادم ولی زمانی که می خوام نام آیکن رو هم از دیتا دریافت کنم این امکان رو به من نیمیده میشه یه راهنمایی بفرمایید

{
                iconData.map((item,index)=>{
                    <IconButton aria-label={item.label}>
                        <a href={item.url} target="_blank" rel="noopener noreferrer">
                            <{`${item.icon}`} sx={{color: "gray"}}/>
                        </a>
                    </IconButton>
                })

خیلی وقت من رو گرفت ولی نشدکه نشد (:

راستی استاد بزرگوار، من توسعه دهنده بک اند هستم (دات نت) و برای اینکه ضعف خودنم رو در رابطه با فرانت برطرف کنم از این دوره شما استفاده می کنم، آشنایی متوسطی هم از css دارم ولی جاوا اسکریپت رو تقریبا وارد هستم، آیا کار من با همین MUI راه میفته یا برای فول استک شدن باید دوره تخصصی css رو هم ببینم چون جدیدا پروژه هایی داره بهم می خوره که باید بخش فرانتش رو هم خودم پیاده سازی کنم و طراحی قالب این پروژه ها برام واقعا عذاب آوره(البته سعی می کنم پناه ببیرم به قالب های آماده ولی بالاخره یه بخش هایی هست که کاستوم شده مشتریه و باید حتما خودم طراحی کنم). ممنون میشم اگر راهنمایی بفرمایید