how make dynamic icons

Describe the problems
How make dynamic icons?

Minimal sample repository

import { lazy } from 'react';

const DynamicIcon = ({...props}) => {
  const iconDir = props.icon?.slice(0, 2).toLowerCase()
  console.log(iconDir) // ri, tn, tb
  // expetation -> import { RiShieldStarLine } from "react-icons/ri"
  const Icon = lazy(() => import(`react-icons/${iconDir}/index.js`).then(icons => icons[props.icon]))
  console.log(Icon) // error Cannot find module

  return (
    <div>
      <Icon />
    </div>
  )
}

export default DynamicIcon

Expected behavior
i want to call dynamic icon from API.
like with props 'RiShieldStarLine'.
How to call like static import { RiShieldStarLine } from "react-icons/ri" with React.lazy

Errors

I got error
`Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.`

`Error: Cannot find module '/frontend/node_modules/react-icons/vs/index.js' imported from /frontend/build/index.js`

Desktop (please complete the following information):

• Device: Macbook Pro 2020
• OS: Monterey 12.5
• Browser: Google Chrome
• Version: 104.0.5112.101

No repository file or test is named. Start by reproducing the DynamicIcon sample and inspect the reported react-icons/ri/index.js and react-icons/vs/index.js import paths alongside the named-export error. The requested behavior is complete when an API-provided icon name loads reliably with React.lazy and the supported usage is clear.