<p>Hello, I am trying to dynamically load icons from mui, here is the code: </p> <pre class="brush:php;toolbar:false;">import React from "react"; import * as MuiIcons from "@mui/icons-material"; console.log("MuiIcons: ", MuiIcons); const Icon = ({ iconName }) => { return <div>{MuiIcons[iconName]}</div>; }; export default Icon;</pre> <p>But I get the following error: </p> <pre class="brush:php;toolbar:false;">react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom.development.js:14887:9) at reconcileChildFibers2 (react-dom.development.js:15828:7) at reconcileChildren (react-dom.development.js:19167:28) at updateHostComponent (react-dom.development.js:19924:3) at beginWork (react-dom.development.js:21618:14) at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) at invokeGuardedCallback (react-dom.development.js:4277:31) at beginWork$1 (react-dom.development.js:27451:7) at performUnitOfWork (react-dom.development.js:26557:12)</pre> <p>Any solutions? Thank you in advance. </p>

const Icon = ({ iconName }) => {
  const Icon = MuiIcons[iconName]
  return <Icon />
}