Avoid Duplicate Meta Description and Keywords in Next.js

I'm developing my website with Next.js To upgrade my website's SEO performance, I'm trying to avoid duplicated meta tags.

My Question

In Next official docs, they say that I can avoid overlapped meta tag by insert key property in meta tag. But this does not work.

<meta name="description" content="~~" key="titleDescription"/>
<meta name="keywords" content="~~" key="titleKeywords"/>

These are default rootDocument meta tags and,

<meta name="description" content={item.product_description} key="titleDescription"></meta>
<meta name="keywords" content={item.brand_name} key="titleKeywords"></meta>

These are dynamically generated meta tags in item pages.

In deployed browser, there are still two description and keywords meta tags in website. I want to avoid duplicated meta tag. Thank you for your help!

from Avoid Duplicate Meta Description and Keywords in Next.js