app/catering/[slug]/page.tsx
Type error: Type 'ResolvingMetadata | undefined' does not satisfy the constraint 'ResolvingMetadata'.
Type 'undefined' is not assignable to type 'Promise<ResolvedMetadata>'.

Getting this error from basically a copypasted code from the docs?

import { Metadata, ResolvingMetadata } from 'next';

type Props = {
params: { slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}


export async function generateMetadata(
{ params, searchParams }: Props,
parent?: ResolvingMetadata,
): Promise<Metadata> {
// read route params
const city = params.slug
? params.slug.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
: null;

// Non-null assertion
if(!city) {
throw new Error("City is undefined");
}


return {
title: ${city} Catering - Compare Caterers in ${city},
description: Compare Caterers in ${city} today by getting several personalized proposals to compare, securing the perfect caterer for your event.
};
}

How to fix this?