Multiple title tags in source code

Hello,

I am using Next.js version 13.2.3.
I use the metadata for server side pages as follows, there is no problem.
(https://beta.nextjs.org/docs/api-reference/metadata#generatemetadata)

export const metadata = {
title: 'About'
}

I use it like this in Layout.jsx;

export const metadata = {
title: {
default: 'Home Page',
template: '%s | App Name',
}
}

Everything works fine so far, but sometimes I have to use "use client"; on some pages and when I do that, the use of const metadata doesn't work. As a solution, I create head.jsx in that page folder and it works. Example;

export default async function Head({ params }) {
return (
<>
<title>Test | App Name</title>
<meta name="description" content="description is here"></meta>
</>
);
}

But the problem here is that there are two

tags in the source code. The first tag is "Home Page" and the other tag is the title I added in head.jsx. Has anyone encountered this problem before? What kind of solution should I follow? I hope I was able to explain.