title: How to change props object name when it's clicked in react?
body: <p>I'm creating a youtube clone using react js and i used this icon</p>
  <pre><code>import HomeIconfilled from '@mui/icons-material/Home';
  import HomeIcon from '@mui/icons-material/HomeOutlined';
  </code></pre>
  <p>That looks like this <a href="https://i.stack.imgur.com/XgLvn.png" rel="nofollow noreferrer">HomeIconfilled</a></p>
  <p>which gets rendered by calling this function</p>
  <pre><code>        &lt;Sidebariconfunc  Icon={HomeIconfilled} Title=&quot;Home&quot;/&gt; 
  </code></pre>
  <p>That takes 2 parameters and reder the icon</p>
  <pre><code>function Sidebariconfunc({Icon,Title}) {
  
  
  return (
      &lt;div className='SidebarRow'&gt;
             &lt;div className='Sidebar_Icon'&gt;
                &lt;Icon/&gt;
             &lt;/div&gt;
               &lt;div className='Slidebar_Title'&gt;
                    {Title}
               &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>How can i chane the props name to HomeIcon when i click on the icon so that it changes to this this icon <a href="https://i.stack.imgur.com/82SQr.png" rel="nofollow noreferrer">HomeIcon</a>
  Thamks !</p>