Как динамически изменить изображение метатега в reactjs для обмена ссылками на Facebook, WhatsApp или любой платформе

Question

Мне нужно отобразить изображение для ссылки при публикации в Facebook, WhatsApp или на любой платформе. Это работало, когда добавлялось в index. html, но мне нужно добавить изображение в компонент, потому что изображение - Dynami c. Я попытался с meta-tag реагировать, но не сработало, пожалуйста, помогите мне.

return (
    <div className="wx-1120px border-box pxl-10px">
      <MetaTags>
        <title>title app.js</title>
        <meta property="og:site_name" content="The Rock Photo Studio" />
        <meta property="og:title" content="The Rock Photo Studio in Florida" />
        <meta
          property="og:description"
          content="The best photo studio for your events"
        />
        <meta
          property="og:image"
          content="https://thewedpostamit.s3.ap-southeast-1.amazonaws.com/1584017948002WK2_4905.jpg"
        />
        <meta property="og:type" content="website" />
        <meta property="og:image:type" content="image/jpg" />
        <meta property="og:image:width" content="300" />
        <meta property="og:image:height" content="300" />
        <meta
          property="og:url"
          content="https://thewedpost.com/stories/varsha-and-ram-from-college-sweethearts-to-happily-ever-after"
        />
      </MetaTags>
      <h3 className="wx-100precent fsx-48px din-bo alText-center mxb-15px">
        Test Title{" "}
      </h3>
      <img
        src="https://thewedpostamit.s3.ap-southeast-1.amazonaws.com/1584017948002WK2_4905.jpg"
        alt="test"
        height="300"
        width="300"
      />
      <p className="alText-center din-re fsx-14px color-HEX666666 mxb-30px">
        Published by - Test User | 8 minute read
      </p>

      <style jsx>{`
        .word-wrap {
          word-wrap: break-word;
          text-align: justify;
        }
      `}</style>
    </div>
  );