Добавить твиттер: карта с реактивным шлемом

Question

Я добавил все метатеги для создания твиттер-карты, но когда я пытаюсь выполнить твиттер-проверку, он говорит мне: ИНФОРМАЦИЯ: Страница успешно загружена ИНФОРМАЦИЯ: найдено 3 метатега ОШИБКА: Карта не найдена (Ошибка карты) Я не могуНе думаю, что я могу поместить все метатеги в meta = {[...]}, потому что они не работают одинаково.

Что я могу сделать, чтобы решить? Это важно !!!

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'

import Header from '../components/header'
import './index.css'

const Layout = ({ children, data }) => (
  <div>
    <Helmet
      title={data.site.siteMetadata.title}
      meta={[
        { name: 'description', content: data.site.siteMetadata.description },
        { name: 'keywords', content: data.site.siteMetadata.keywords },
      ]}
    >
      <meta name="twitter:card" content="summary" />
      <meta
        name="twitter:description"
        content="xxx"
      />
      <meta
        name="twitter:title"
        content="xxx"
      />
      <meta property="og:locale" content="en_US" />
      <meta property="og:type" content="website" />
      <meta
        property="og:title"
        content="xxx"
      />
      <meta
        property="og:description"
        content="xxx"
      />
      <meta property="og:url" content="http://example.com/" />
      <meta property="og:site_name" content="xxx" />
    </Helmet>
    <Header />

    {children()}
  </div>
)

Layout.propTypes = {
  children: PropTypes.func,
}

export default Layout

export const query = graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
        description
        keywords
      }
    }
  }
`

ИНФОРМАЦИЯ: Страница извлечена успешно
ИНФОРМАЦИЯ: найдено 3 метатега
ОШИБКА: карта не найдена (ошибка карты)