How to pass material-ui icons to react component as props and render it?

I created a react app and styled it using material icons, but don't know how to pass this icon as props to another component. I already know how to pass string, array and objects as props to components.

I tried to pass this as strings but didn't work and tried to resolve this issue.

Here is how I usually do it:

import React from 'react';
import AppsOutageIcon from '@mui/icons-material/AppsOutage';
const AnotherComponent = (props) => (
  <div>
    Here is my passed icon: {props.icon}
  </div>
);
function App() {
  return (
    <div className="App">
      <AnotherComponent icon={<AppsOutageIcon />} />
    </div>
  );
}

If you pass the imported icon directly as a prop to another component and try to render it, you will encounter the following 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.

To resolve this issue, you need to instantiate the component first by wrapping the imported icon as a tag, like <AppsOutageIcon />, instead of just using AppsOutageIcon.