Hey guys, I have a title template defined in layout.tsx as follows.

export const metadata: Metadata = {
  title: {
    template: 'Foo | %s',
    default: 'Foo | Bar',
  },
  description: 'Foo Bar',
}

Then I use generateMetadata in page.tsx located at the same level as layout.tsx (homepage). The function returns the following.

  ...
  const metadata: Metadata = {
    title: 'Home',
    description: 'Description of homepage',
  }
  return metadata
}

Problem: when I navigate to homepage the title is Home instead of Foo | Home. How can I achieve the latter?

Thank you