Metas not working in react helmet even while present in the head tag at output?

  javascript, react-helmet, reactjs

I’m trying to use react helmet to create metas, but when i test them they don’t seem to work at all. Here is my code below:

<div className="post-header-main" ref={parentRef}>
                    <meta name="description" content="Blog on webber" />
                    <meta name="og:title" content={title} />
                    <meta name="og:url" content={"" + pathname}  />
                    <meta name="og:description" content="Blog on webber" />
                    <meta name="og:image" content={metapostimageurl} />
                    <meta name="og:type" content="Blog" />
                    <meta property="og:locale" content="en_US" />
                    <meta name="twitter:title" content={title} />
                    <meta name="twitter:description" content="Blog on webber" />
                    <meta name="twitter:image" content={metapostimageurl}  />
                    <meta name="twitter:card" content="summary" />  

The metas are being rendered into the html and I’m able to see them in the head tags, but none of the meta testers online are able to read them at all!

To add in more information, this code snippet is directly from a child component. What could be the problem and what is the correct approach????

Source: Ask Javascript Questions