Nextjs getserversideProps renders without changing meta data from query parameter

Question

I am trying to load query parameters using getServerSideProps to insert Head meta tag based on the parameters response from API request.

Currently, the below code works and return the exact UI from API responses but didn't update head meta tag components. i.e. It renders only <div>loading</div> component first and never update NextHead meta tag even the UI changes once getData function called and updated the Content value.

const API_BASE_URL = 'https://url'

export const Index: FC<Props> = ({ queryParam }: Props) => {
    const [content, setContent] = useState<Content>()

    useEffect(() => {
        const id = JSON.parse(JSON.stringify(queryParam.id))
        const getData = () => {
            axios
                .get(`${API_BASE_URL}/${id}`)
                .then((res) => {
                    const data = JSON.parse(JSON.stringify(res.data)) as ContentResponse
                    setContent(data?.data)
                })
                .catch((e) => console.log(e))
        }

        getData()
    }, [queryParam.id])

    if (content === null || articleContents === undefined) {
        return <div>loading</div> // <- this renders first and never update Head meta
    }


    return (
  <>
            <NextHead>
                <meta property="og:image" content={content.thumbnail_image_url} />
                <meta property="og:url" content={content.thumbnail_image_url} />
                <meta property="og:title" content={content.title} />
            </NextHead>
</>
<Content articleContents={articleContents} /> )
}

export const getServerSideProps = (
    context: GetServerSidePropsContext
): GetServerSidePropsResult<Props> => {
    const queryParam = context.query ?? 'no value'

    return {
        props: {
            queryParam: queryParam
        }
    }
}

I am not sure why HTML components ( NextHead ) never update to the latest state and would like to know how to solve this problem.