Как программно показать изображение в шлеме React с помощью Gatsby?

Я использую Gatbsy для своей главной страницы, и я пытаюсь программно добавить некоторые метаданные с помощью реакции-шлема.

У меня есть компонент SEO следующим образом:

const SEO = ({title, description, location, image_url}) => {
    const capitalize = string => {
        if (string !== undefined){
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        return string

    };

    const MAIN_TITLE = settings.META_TITLE;
    return (
        <Helmet>
            <title>{`${MAIN_TITLE} | ${capitalize(title)}`}</title>
            <meta name="description" content={description}/>
            <meta property="og:title" content={`${MAIN_TITLE} | ${capitalize(title)}`}/>
            <meta property="og:description" content={description}/>
            <meta property="og:image" itemProp="image" content={image_url !== undefined ? image_url : `${settings.ROOT_URL}/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg`}/>
            <meta property="og:type" content="website"/>
            <meta property="og:url" content={location.href}/>
            <meta property="twitter:title" content={`${MAIN_TITLE} | ${capitalize(title)}`}/>
            <meta property="twitter:description" content={description}/>
            <meta property="twitter:image" itemProp="image"  content={image_url !== undefined ? image_url : `${settings.ROOT_URL}/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg`}/>
            <meta property="twitter:card" content="summary_large_image"/>
        </Helmet>
    )
};

export default SEO

И я использую его на одной из страниц Гэтсби следующим образом:

<div className="flex flex-col overflow-x-hidden min-h-screen">
     {loading && !hasError && <LoadingIndicator/>}
     {!loading && hasError && <div className="container my-12"><ErrorIndicator/></div>}
     {!loading && !hasError && <React.Fragment>
             <SEO title={`${vehicle.make} ${vehicle.model} ${vehicle.type}`}
                  description={`${vehicle.make} ${vehicle.model} wacht op u.`}
                  location={location}
                  image_url={vehicle.images instanceof Array ? vehicle.images[0].uri : vehicle.images.uri}/>
              .... // Rest of the code
      <React.Fragment>}
</div>

Когда я проверяю консоль в теге на localhost или на сервере, я вижу то, что я должен видеть:

Но в Facebook я вижу кое-что еще. Для изображения, например, я вижу:

og:image    http://my-site/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg

Facebook использует оператор else в теге <meta property="og:image" ..../>, но image_url не является неопределенным, и в консоли я вижу правильный URL.

Любая идея?