How do I generate dynamic meta description and image in React using React Helmet?

React-helmet is not ideal for the solution required. Below is the order in which the browser handles it

1. Request a page with its path.
2. Fetch the resources for that page.
3. Load the default HTML (with meta tags...)
4. Execute JavaScript codes thereby the meta tags are updated via react-helmet.

Having your application hosted on a server, the default meta-tags are rendered as fetched. It changes only when a browser requests for a resources on a page, after which the react-helmet functions are executed.

A Better solution that I could think of would be to configure meta-tags from the server and Hydrate at the front-end.

Example Below,

<html>
  <head>
    __PLACEHOLDER_FOR_DYNAMIC_META_TAG__
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Read the index synchronously and replace the placeholder with meta-tag needed

const path = require("path")
const express = require("express")
const app = express()
const fs = require("fs")

const indexFilePath= path.join(__dirname, "build/index.html")
app.get("/", (req, res) => {
  const myFile = fs.readFileSync(indexFilePath)
  const myMetaTag= "Meta tag details as per requirement"
  const toHydrate = myFile.replace("__PLACEHOLDER_FOR_DYNAMIC_META_TAG__", myMetaTag)
  res.send(toHydrate)
});

app.get("*", (req, res) =>
  res.sendFile(path.join(__dirname, "build/index.html"))
)
const port = process.env.PORT || 5000
app.listen(port, () => {
  console.log(`Server listening on port ${port}`)
});

In your react app instead of ReactDOM.render(<App/>, ...) use ReactDOM.hydrate(<App />, ...)

Or simply go for Next.js :)

Updated answer for your comment below,

document.getElementsByTagName('meta')["keywords"].content = "Hello";
document.getElementsByTagName('meta')["description"].content = "description";