How to Update Dynamic Meta Tags using Reactjs

Question

I Fetch Data From Server and I want to show dynamic meta title and description but when i set dynamic data in inspect element it show's dynamic values but not updated in page source and also when share on social media like whatsapp, facebook etc it not showing dynamic title and description.

 const MetaTag = (props) => {
 const { pageTitle, metaTitle, metaDescription } = props;
 return (
 <Helmet>
  <title>{pageTitle}</title>
  {/* <!-- Primary Meta Tags --> */}
  <meta name="title" content={metaTitle} />
  <meta name="description" content={metaDescription} />

  {/* <!-- Open Graph / Facebook --> */}
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://google.com/" />
  <meta property="og:title" content={metaTitle} />
  <meta property="og:description" content={metaDescription} />
  <meta property="og:image" content="%PUBLIC_URL%/apple-icon-57x57.png" />

  {/* <!-- Twitter --> */}
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://google.com/" />
  <meta property="twitter:title" content={metaTitle} />
  <meta property="twitter:description" content={metaDescription} />
  <meta
    property="twitter:image"
    content="%PUBLIC_URL%/apple-icon-57x57.png"
  />
</Helmet>

); };

It shows dynamic meta title and description in inspect element but when i do ctrl + u in page source it not showing dynamic meta title and description also when i share my site from mobile to facebook,whatsapp it can't show correct meta title and description