I've set up my opengraph in my project, using the commerce project by vercel on GitHub as a guide. However, whenever I try to share my link, the image fails to load. What I'm left with is the title and description. What do I have to do to make this work correctly? I have my opengraph-image.tsx file setup

import { ImageResponse } from "next/og";
import LogoIcon from "./icons/logo-icon";

export type Props = {
title?: string;
};

export default async function OpengraphImage(
props?: Props,
): Promise<ImageResponse> {
const { title } = {
...{
title: process.env.SITE_NAME,
},

...props,
};

return new ImageResponse(
(
<div tw="flex h-full w-full flex-col items-center justify-center bg-black">
<div tw="flex flex-none items-center justify-center border border-neutral-700 h-[160px] w-[160px] rounded-3xl">
<LogoIcon width="64" height="58" fill="none" />
</div>
<p tw="mt-12 text-6xl font-bold text-white">{title}</p>
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: "Inter",
data: await fetch(
new URL("../fonts/Inter-Bold.ttf", import.meta.url),
).then((res) => res.arrayBuffer()),
style: "normal",
weight: 700,
},
],
},
);
}


It's imported in my app folder in another opengraph-image.tsx file as such:

import OpengraphImage from "@/components/opengraph-image";

export const runtime = "edge";

export default async function Image() {
return await OpengraphImage();
}