Add twitter:card with react helmet - reactjs

Question

I added all the meta tags to create a twitter card but when I try to do the twitter validation it tells me: INFO: Page fetched successfully
INFO: 3 metatags were found
ERROR: No card found (Card error)
I don't think I can put all the meta tags in meta={[...]} because it doesn't work the same.
What can I do to resolve? It's important!!!
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
}
}
}
`
INFO: Page fetched successfully
INFO: 3 metatags were found
ERROR: No card found (Card error)