I am implementing my metadata on server side pages not client side pages and when I try to update the metadata for my settings page, it just reads the metadata from my Root Layout.

Here is the part of the code of the metadata:

import { Metadata } from "next";

const metadata: Metadata = {
  title: "Settings",
  description: "Manage your account settings!",
  alternates: {
    canonical: "https://www.voicefusion.io/settings",
  },
};

Root Layout

import { Metadata } from "next"
export const metadata: Metadata = {
  title: 'Voice Fusion',
  description: 'AI Generated voices for your videos', 
  alternates: {
    canonical: 'https://www.voicefusion.io',
  }
}