How to render SEO component dynamically in gatsby js

Question

I want to show the title of my page as preview when someone copy a url from this site and past it on whatsapp. The problem is index.js page loading title as preview correctly but dynamic nested page is not loading title as preview

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `My new gatsby blog`,
    description: `A site to showcase my blog`,
    image: `/meta-image.png`,
    siteUrl: `https://www.syied.netlify.app`,
  },
  plugins: [],
};

use-site-metadata.jsx

import { graphql, useStaticQuery } from "gatsby";

export const useSiteMetadata = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          description
          image
          siteUrl
        }
      }
    }
  `);

  return data.site.siteMetadata;
};

`seo.js`

import React from "react";

export const SEO = ({ title }) => {
  return (
    <>
      <title>{title || "hello title"}</title>
      <meta name="title" content={title} />
    </>
  );
};

> This index.js showing preview correctly

index.js

import { Link } from "gatsby";
import * as React from "react";
import { useState, useEffect } from "react";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { SEO } from "../Components/seo";

const IndexPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // fetch posts data from API
    const requestOptions = {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "x-app-token": "E9FE46D9-FC93-480F-9DC6-D26F7DE243A0",
      },
    };

    fetch(
      "https://ms-testnet.api.onnftverse.com/v1/marketplace/0/blog/post/list?type=TUTORIAL",
      requestOptions
    )
      .then((response) => response.json())
      .then((data) => {
        setPosts(data.content);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <SkeletonTheme baseColor="#202020" highlightColor="#444">
        {loading ? (
          <Skeleton count={50} />
        ) : (
          <div>
            <h1>Welcome to Gatsby Blog</h1>

            {posts.map((post) => (
              <div key={post.postId}>
                <h1>{post.title}</h1>
                <div
                  dangerouslySetInnerHTML={{
                    __html: post?.description.slice(0, 200),
                  }}
                />
                <Link
                  to={`/post/${post.postId}`}
                >
                  Read more
                </Link>
              </div>
            ))}
          </div>
        )}
      </SkeletonTheme>
    </div>
  );
};

export default IndexPage;

export const Head = () => <SEO title="my gatsby blog" />;

This is nested page which will fetch post according to id value. there link preview is not working /post/[id].js`

import { Link } from "gatsby";
import React, { useEffect, useState } from "react";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { SEO } from "../../Components/seo";

const Singlepost = (props) => {
  const [post, setPost] = useState();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const requestOptions = {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "x-app-token": "E9FE46D9-FC93-480F-9DC6-D26F7DE243A0",
      },
    };

    fetch(
      `https://ms-testnet.api.onnftverse.com/v1/marketplace/blog/post/${props.params.id}/detail`,
      requestOptions
    )
      .then((response) => response.json())
      .then((data) => {
        setPost(data);
        setLoading(false);
      });
  }, [props.params.id]);

  return (
    <div style={{ width: "60%", margin: "auto", paddingTop: "2%" }}>
      <SkeletonTheme baseColor="#202020" highlightColor="#444">
        {loading ? (
          <Skeleton count={50} />
        ) : (
          <div>
            <Link
              to="/"
            >
              Home
            </Link>
            <h1>Title: {post?.title}</h1>
            <h3>Category: {post?.category}</h3>
            <h1>Description</h1>

            <div dangerouslySetInnerHTML={{ __html: post?.description }} />
          </div>
        )}
      </SkeletonTheme>
    </div>
  );
};

export default Singlepost;
export const Head = () => <SEO title="single post" />;

I tried to show link preview on whatsapp. index.js file showing properly but /post/[id].js page is not showing any preview on whatsapp