can't render data properly inside new head.js next.js 13 - next.js

Question

I'm working on a project using new Next.js 13 app Dir, I'm trying to render the data from CMS. I'm getting the data works but no dynamic value tags are passed to social share cards (Twitter, Facebook) i think because data get rendered in the client, or is it something else!
So, I'm seeking help to understand how to properly fetch and render the data (SSR) way, and what I do wrong in my code.
'use client'
import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
import DefaultTags from '../../../components/DefaultTags'
import { client } from '../../../utils/contentful'
export async function generateStaticParams() {
const res = await client.getEntries({
content_type: 'article',
})
return res.items.map((item) => ({
slug: item.fields.slug,
}))
}
export default function Head({ params }) {
const pathname = usePathname()
const [data, setData] = useState(null)
useEffect(() => {
async function getEntry() {
const response = await client.getEntries({
content_type: 'article',
'fields.slug': params.slug,
include: 10,
})
setData(response.items[0])
}
getEntry()
}, [params.slug])
if (data === null) {
return undefined
}
const { title, category, tags, featuredImg } = data.fields
const url = `https://example.com${pathname}` || 'https://example.com'
return (
<>
<DefaultTags />
<title>{`${title} | blog `}</title>
<meta property="url" content={url} />
<link rel="canonical" href={url} />
<meta name="description" content={title} />
<meta name="keywords" content={tags} />
<meta name="article:section" content={category} />
<meta name="twitter:title" content={`${title} | blog `} />
<meta name="twitter:description" content={title} />
<meta
name="twitter:image"
content={`https:${featuredImg[0].fields.file.url}`}
/>
<meta name="twitter:image:alt" content={title} data-rh="true" />
<meta property="og:title" content={`${title} | blog`} />
<meta property="og:url" content={url} />
<meta property="og:type" content="article" />
<meta property="og:description" content={title} />
<meta
property="og:image"
content={`https:${featuredImg[0].fields.file.url}`}
/>
<meta property="fb:app_id" content="Facebook id" />
</>
)
}