Lazy Loading Dynamically Imported React-Icons in Astro causes unterminated RegEx error

Question

I want to import React-Icons from a list within a JSON file. However, when compiling, I get a weird unterminated RegEx error, and it shows odd code up to the lazy loading icon elements.

Here is my code for lazy loading the icons within my Astro project:

---
...
function loadIcons(iconMap: {[key:string] : string[]}) {
    let Icons: React.LazyExoticComponent<React.ComponentType>[]  = [];
    for(var type of Object.keys(iconMap)) {
        if(iconMap[type]) {
            iconMap[type].map( Icon => {
                if (type === "fa") {
                    Icons.push(lazy(() => 
                        import('react-icons/fa').then(module => ({ default: module[Icon] }))
                    ));
                }
                else if (type === "io") {
                    Icons.push(lazy(() => 
                        import('react-icons/io').then(module => ({ default: module[Icon] }))
                    ));
                }
                else if (type === "di") {
                    Icons.push(lazy(() => 
                        import('react-icons/di').then(module => ({ default: module[Icon] }))
                    ));
                }
            })
    }
    }
    return Icons;
}

const Icons: React.ComponentType[] = loadIcons(icons);
---

...
                <Suspense fallback={<div>"Loading skills..."</div>}>
                    <ul>
                        {Icons.map((Icon, index) => (
                            <li>
                                <Icon size={21} />  
                            </li>
                        ))}
                    </ul>
                </Suspense>

and here are interesting parts of the compilation error:

...${$$renderComponent($$result,'Suspense',Suspense,{"fallback":(<div>"Loading skills..."</div>)},{"default": ($$result) => $$render` <ul> ${Icons.map((Icon, index) => (
                                         ^
74 |                                                    $$render`<li> ${$$renderComponent($$result,'Icon',Icon,{"size":(21)})} </li>`
75 |                                            ))} </ul> `,})} <hr> </div> ${$$renderSlot($$result,$$slots["default"])} ${$$renderComponent($$result,'Comments',Comments,{})} </div> </article> `,})}`;

 error   Unterminated regular expression
...
> 73 |               </svg>
  Stacktrace:
Error: Transform failed with 1 error:
C:/Users/casey/OneDrive/Documents/GitHub/astro-portfolio-blog/src/layouts/Project.astro:73:1895: ERROR: Unterminated regular expression

How can I dynamically import React-Icons from a list of their names?

For example:

"icons": {
    "fa": [
      "FaPython",
      "FaDatabase",
      "FaServer",
      "FaTwitter",
      "FaNewspaper",
      "FaApple"
    ],
    "io": [
      "IoMdAnalytics"
    ]
  },