upstream image response failed for 400

I can't see my images, is there something wrong with my code?

file-card.tsx

function getFileUrl(fileId: Id<"_storage">): string {
  return `${process.env.NEXT_PUBLIC_CONVEX_URL}/api/storage/${fileId}`;
}

export function FileCard({ file }: { file: Doc<"files"> }) {
  const typeIcon = {
    image: <ImageIcon />,
    pdf: <FileTextIcon />,
    csv: <GanttChartIcon />,
  } as Record<Doc<"files">["type"], ReactNode>;
  return (
    <Card>
      <CardHeader className="relative">
        <CardTitle className="flex items-center gap-2 truncate">
          <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-200">
            {typeIcon[file.type]}
          </div>{" "}
          {file.name}
        </CardTitle>
        <div className="absolute top-3 right-3">
          <FileCardActions file={file} />
        </div>
        <CardContent>
          {file.type === "image" && (
            <Image
              alt={file.name}
              src={getFileUrl(file.fileId)}
              width={200}
              height={200}
            />
          )}
        </CardContent>
        {/* <CardDescription>Card Description</CardDescription> */}
      </CardHeader>
      <CardFooter>
        <Button>Download</Button>
      </CardFooter>
    </Card>
  );
}

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;

*btw I hid my env with a "**" sign.

I tried and read slowly about the documentation from https://nextjs.org/docs/pages/building-your-application/optimizing/images but still the problem is not solved.

${NEXT_PUBLIC_CONVEX_URL}/api/storage/${fileId} is not a valid url, you'll need to use ctx.storage.getUrl() (see docs) to get a URL for this image.