I'm trying to generate image for metadata with background image but when I import like below, it doesnt give any og image but just white blank page. Am I doing something wrong?

import { ImageResponse } from "next/server";

export function generateImageMetadata() {
  return [
    {
      contentType: "image/png",
      size: { width: 960, height: 480 },
      id: "small",
    },
    {
      contentType: "image/png",
      size: { width: 960, height: 480 },
      id: "medium",
    },
  ];
}

async function getData(id: string) {
  const res = await fetch(`http://fetching-url.../${id}`);

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

export default async function Image({ params, id }: { params: { id: string }; id: number }) {
  const productId = params.id;
  const imageId = id;
  const { data } = await getData(params.id);

  return new ImageResponse(
    (
      <div
        style={{
          backgroundImage: "url(https://image-url.../background.webp)",
          backgroundSize: "100% 100%",
          backgroundRepeat: "no-repeat",
          width: "100%",
          height: "100%",
          backgroundColor: "#000000",
        }}
      >
        {data.title}
      </div>
    )
  );
}