Head section updated on Next js not visible in source code

I am using Next js for for my website and added Head section on every page for SEO

Here's my code for All Blogs page. I have imported withRouter so that I can use router in Head section

 const head = () => {
    <Head>
      <title>Mental health blogs | {APP_NAME}</title>
      <meta
        name="description"
        content="Mental Health blogs and tutorials on how to live mental-illness free"
      />
      <link rel="canonical" href={`${DOMAIN}${router.pathname}`} />
      <meta
        property="og:title"
        content={`Latest mental health blogs | ${APP_NAME}`}
      />
      <meta
        property="og:description"
        content="Mental Health blogs and tutorials on how to live mental-illness free"
      />
      <meta property="og:type" content="website" />
      <meta property="og:url" content={`${DOMAIN}${router.pathname}`} />
      <meta property="og:site_name" content={`${APP_NAME}`} />

      <meta property="og:image" content={`${APP_NAME}`} />
      <meta property="og:image:secure_url" content={`${APP_NAME}`} />
      <meta property="og:image:type" content={`${APP_NAME}`} />
      <meta property="fb:app_id" content={`${FB_APP_ID}`} />
    </Head>;
  };

My All Blogs page is Server Side rendered. When viewing my source code of this page, I can't see my meta title, meta desc etc. Any idea what is going wrong here. Thanks in advance!