title: Why is gatsby-plugin-image missing image prop?
body: <p>I am working on improving my image sizes and noticed that gatsby image was deprecated so I decided to try on the <code>gatsby-plugin-image</code>. On static images like this:</p>
  <pre><code>&lt;StaticImage
   src=&quot;../images/image.png&quot;
   alt=&quot;software design&quot;
   layout={'fullWidth'}
   formats={['auto', 'webp']}
  /&gt;
  </code></pre>
  <p>is working fine. But when working on the images from netlify cms I get that following error <code>Missing image prop</code> even I have following:</p>
  <pre><code>&lt;GatsbyImage
    image={refImage}
    alt={refImage}
    layout={'fullWidth'}
    formats={['auto', 'webp']}
  /&gt;
  </code></pre>
  <p>The whole file is as follows.</p>
  <pre><code>import React from 'react'
  import PropTypes from 'prop-types'
  import { GatsbyImage, getImage } from 'gatsby-plugin-image'
  
  import * as S from './styled'
  import './postitem.css'
  
  const ReferenceItem = ({
      slug,
      background,
      category,
      date,
      title,
      description,
      image,
      timeToRead,
  }) =&gt; {
      const refImage = getImage(image)
      return (
          &lt;S.BlogColumn&gt;
              &lt;article className=&quot;post&quot; key={slug}&gt;
                  &lt;S.BlogColumn&gt;
                      {image &amp;&amp; (
                          &lt;GatsbyImage
                              image={refImage}
                              alt={refImage}
                              layout={'fullWidth'}
                              formats={['auto', 'webp']}
                          /&gt;
                          /*                         &lt;img
                                  style={{
                                      display: 'block',
                                      width: '100%',
                                      height: 'auto',
                                  }}
                                  src={`/${image}`}
                                  alt={image}
                              /&gt; */
                      )}
                      {!image &amp;&amp; (
                          &lt;img
                              style={{
                                  display: 'block',
                                  width: '100%',
                                  height: 'auto',
                              }}
                              src={require('../../../static/assets/img/cover.webp')}
                              alt=&quot;cover&quot;
                          /&gt;
                      )}
                  &lt;/S.BlogColumn&gt;
                  &lt;S.BlogColumn&gt;
                      &lt;div className=&quot;post-content&quot;&gt;
                          &lt;h2 className=&quot;post-title&quot;&gt;{title}&lt;/h2&gt;
                          &lt;p className=&quot;post-item-description&quot;&gt;{description}&lt;/p&gt;
                          &lt;span className=&quot;post-date&quot;&gt;
                              {date}&amp;nbsp;&amp;nbsp;—&amp;nbsp;
                          &lt;/span&gt;
                          &lt;span className=&quot;post-words&quot;&gt;
                              {timeToRead} minute read
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/S.BlogColumn&gt;
              &lt;/article&gt;
          &lt;/S.BlogColumn&gt;
      )
  }
  
  ReferenceItem.propTypes = {
      slug: PropTypes.string.isRequired,
      background: PropTypes.string,
      category: PropTypes.string,
      date: PropTypes.string.isRequired,
      timeToRead: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired,
      description: PropTypes.string,
  }
  
  export default ReferenceItem
  </code></pre>