title: How to use Next JS IMAGE inside material ui card media
body: <p>I am using Next JS and Material UI together in my project. for Image optimization, I would like to use the Next JS Image component.</p>
  <p>currently, my card media looks like below. I am getting the image URL <strong>row.image.url</strong> from an API call and assigning it to the <strong>image</strong> prop of the <strong>CardMedia</strong> component</p>
  <pre><code> &lt;CardMedia
   className={classes.cardMedia}
   image={row.image.url}/&gt;
  </code></pre>
  <p>But I would like to take the advantage of the Next JS <strong>Image</strong> component for the optimization and lazy loading but couldn't able to see a way to fit this.</p>
  <pre><code>import Image from 'next/image'
  </code></pre>
  <p>Did anyone face this type of requirement?
  Appreciate your help</p>
  <p>Thanks
  Venk</p>