Gatsby Image Path to og:image for seo

Question

I'm using markdown pages to generate my pages on Gastby. I'm defining the image path inside the .md file.

---
slug: "/blog/my-blog-post"
date: "2022-01-11"
title: "My title"
image: /images/blog/my-image-1.png
---
![image-alt](/images/blog/my-image-1.png)
# My content header

My content

{MarkdownRemark.frontmatter__slug}.js

import React from "react"
import { Helmet } from "react-helmet"
import BaseController from "../base-controller"
import { graphql } from "gatsby"
import { getSrc } from "gatsby-plugin-image"
const baseUrl = 'https://pppx.com';
export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  const image = getSrc(frontmatter.image); // image returns as undefined.
  console.log("image",image);
  return (
    <BaseController>
      <Helmet>
        <title>{frontmatter.title}</title>
        <meta name="title" content={frontmatter.title} />
        <!-- this line doesn'g work as expected --!>
        <meta property="og:image" content={frontmatter.image} />
      </Helmet>
      <section>
        <div class="container">
          <div class="row justify-content-center">
              <div class="col-md-12 col-lg-12" dangerouslySetInnerHTML={{ __html: html }}>
              </div>
          </div>
        </div>
      </section>
    </BaseController>
  )
}

export const pageQuery = graphql`
  query og($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        slug
        title
        image
      }
    }
  }
  `

Here I need og:image as the url that is generated by gastby. But I couldn't do that. By the way,

  const image = getSrc(frontmatter.image); // image returns as undefined.
  console.log("image",image);

returns undefined. so getSrc doesn't help me.

Is there way to get og:image working?