meta tags are not updating in my react app – Blancer.com Tutorials and projects

I have a app/layout.js which has got the default meta tags for all the pages in my web application, but for a specific pages in my application have to change the meta tags title and description in my srccontentsblogDetailsBlogDetails.js but i tried couple of things still not overriding the metatags for this page,
Also to add there are no other Head or next/head in my application apart from these

please help in resolving this issue

app/layout.js

import './globals.css';
import { Inter } from 'next/font/google';
import Providr from '@/src/component/Provider/Provider';
import ClientAnalytics from './ClientAnalytics'; // Import the ClientAnalytics component

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Essential Tips',
  description: 'Discover crucial tips',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
        {/* Additional metadata and scripts */}
      </head>
      <body className={inter.className}>
        <Providr>
          <ClientAnalytics /> {/* Include ClientAnalytics */}
          <div className="">
            {children}
          </div>
        </Providr>
      </body>
    </html>
  );
}

i am trying to override this pecific page below:
srccontentsblogDetailsBlogDetails.js

import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import { useDispatch, useSelector } from 'react-redux';
import { usePathname } from 'next/navigation';
import { getBlogs } from '@/src/redux/slices/blog';

import LeftBlock from './LeftBlock/LeftBlock';
import RightBlock from './rightBlock/RightBlock';

const BlogDetails = () => {
  const dispatch = useDispatch();
  const pathname = usePathname();
  const [blog, setBlog] = useState(null);

  const id = pathname.split("/")[2]; // Extract the blog ID from the URL

  useEffect(() => {
    if (id) {
      dispatch(getBlogs(id)).then((result) => {
        setBlog(result.payload); // Assuming the result is stored in `payload`
      });
    }
  }, [id, dispatch]);

  return (
    <>
      <Head>
        <title>Hardcoded Title: Example Blog Post</title>
        <meta name="description" content="This is a hardcoded description for testing purposes." />
      </Head>
      <div className='w-[95%] lg:w-[80%] flex justify-center m-auto'>
        <div className='flex justify-between gap-[4%] flex-col-reverse lg:flex-row-reverse'>
          <div className='w-[100%] sm:w-[500px] lg:w-[320px] mx-auto'>
            <RightBlock />
          </div>
          <div className='w-[100%] lg:w-[700px]'>
            <LeftBlock />
          </div>
        </div>
      </div>
      <div>
        <h1>{blog?.title || 'Sample Blog Title'}</h1>
        <p>{blog?.description || 'Sample Blog Description'}</p>
      </div>
    </>
  );
};

export default BlogDetails;