Twitter card meta tags work in index.html, not in React Helmet

I have used below React Helmet code in App.js for rending Twitter card meta.

          <Helmet>
              <meta charSet="utf-8" />
              <title>
                {`xxxxx`}
              </title>
              <meta
                name="description"
                content={`xxxxx.`}
              />
              <meta name="twitter:card" content="summary_large_image" />
              <meta
                name="twitter:title"
                content="xxxxx"
              />
              <meta
                name="twitter:description"
                content="xxxx."
              />
              <meta name="twitter:site" content="@xxxx" />
              <meta
                name="twitter:image"
                content="https:xxxx"
              />
              <meta name="twitter:creator" content="@xxxx" />
            </Helmet>

The meta tags do show up while I do a browser inspect. But in twitter card validator(https://cards-dev.twitter.com/validator), I am getting ERROR: No card found (Card error).

If I add the same meta tags in index.html, it works. But, I would like the twitter card to work in Helmet so that I can change it dynamically. Is it possible without Server-Side Rendering?

Facebook/Twitter/etc. crawlers do not render JavaScript, so unless you are rendering Helmet content on the server OR including the card meta tags in the index.html file, they will never pick up your client-side updates.