How do I use metadata in `not-found.tsx` in NextJS?

In my NextJS app, I have a not-found.tsx file with some simple metadata in the root of my app directory:

import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Page not found",
};

export default function NotFound() {
  return (
    <>
      <h1 className="mb-4 text-xl">Page not found</h1>
      <Link href="/">
        <button className="rounded bg-blue-600 px-3 py-1 text-sm text-gray-50 dark:bg-blue-700">
          Back to home
        </button>
      </Link>
    </>
  );
}

But when I enter a wrong URL, I see the URL itself as the title of the page, rather than Page not found. I checked the head element, and there's no title element in it.

How can I export a metadata object from a not found page?

Any help would be appreciated!

not yet supported as of Jun 25, 2023