Nextjs Head in _app.js overwriting Head in child component

In my nextjs app I have a Head tag in _app.js as

<GoogleReCaptchaProvider reCaptchaKey={CAPTCHA_SECRET}>
  <Head>
    <html lang="en"></html>
  </Head>
  <DndProvider backend={HTML5Backend}>
    <HttpsRedirect>
      <Fragment>
        <Component {...pageProps} />
        <ToastContainer />
      </Fragment>
    </HttpsRedirect>
  </DndProvider>
</GoogleReCaptchaProvider>

For the lang attribute in html on all pages but in my child component called Layout which renders the component of all pages I also have a Head tag as

<Head>
    <head>
      <title>{title}</title>
      {inject_divs}
      <meta
        name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1"
      />
    </head>
  </Head>

Whenever I remove the Head inside _app.js the Head tag inside Layout component works but when I keep the Head in _app.js the Layout Head gets overwritten, Is there a way by which I can use both?