AstroJS can't import * from React Icons due to outside of module error

Question

I want to dynamically import icons from React-Icons. So, I begin by importing all icons from the sets I intend to use via:

import * as FontAwesome from 'react-icons/fa';

However, this results in this error:

C:\...\astro-portfolio-blog\node_modules\.pnpm\[email protected][email protected]\node_modules\react-icons\io\index.esm.js:2
import { GenIcon } from '../lib';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I removed the import statement, and it resulted in the same error but for the following icon set import, e.g.

import * as IonIcons from 'react-icons/io';

How can I dynamically import and use react-icons with Astro?