PortableText not showing up in browser for a Product component in an ecommerce project

import Link from "next/link";
import { useRouter } from "next/router";
import groq from "groq";
import {
	PortableTextComponentsProvider,
	PortableText,
} from "@portabletext/react";
import { client } from "../../lib/sanity";
import imageUrlBuilder from "@sanity/image-url";

const builder = imageUrlBuilder(client);
function urlFor(source) {
	return builder.image(source);
}

const ptComponents = {
	types: {
		image: ({ value }) => {
			if (!value?.asset?._ref) {
				return null;
			}
			return (
				<img
					alt={value.alt || " "}
					loading="lazy"
					src={urlFor(value).width(320).height(240).fit("max").auto("format")}
				/>
			);
		},
	},
	block: {
		normal: ({ children }) => <p>{children}</p>,
	},
};

export default function Product({ products }) {
	const router = useRouter();
	if (router.isFallback) {
		return (
			<section>
				<h1>Loading...</h1>
			</section>
		);
	}
	const {
		defaultProductVariant = {},
		title = "Missing title",
		blurb,
		body = [],
	} = products;
	const { images, price = "" } = defaultProductVariant;

	return (
		<article>
			<h1>{title}</h1>
			<p>${price}</p>
			<hr />
			<img src={urlFor(images[0]).width(300)} />
			<PortableText value={body} components={ptComponents} />
			<p>{blurb.en}</p>
			<Link href="/">
				<a>Back home</a>
			</Link>
		</article>
	);
}

const query = groq`*[_type == "product" && slug.current == $slug][0]{
    title,
    image,
    price,
	body,
    blurb,
    "slug": slug.current,
    defaultProductVariant
}`;

export const getStaticProps = async (context) => {
	const { slug = "" } = context.params;

	const products = await client.fetch(query, { slug });

	return {
		props: {
			products,
		},
	};
};

export async function getStaticPaths() {
	const paths = await client.fetch(
		groq`*[_type == "product" && defined(slug.current)][].slug.current`
	);

	return {
		paths: paths.map((slug) => ({ params: { slug } })),
		fallback: false,
	};
}