I am trying to save the response from the replicateAI api, but it doesn’t work it makes a prediction, but it doesn’t save it I have tried a lot of stuff including making a separate api endpoint for saving

Here is my code for the api endpoint:

import { NextResponse } from "next/server";
import { auth } from "@clerk/nextjs/server";
import Replicate from "replicate";
import prismadb from "@/lib/prisma";

const replicate = new Replicate({
  auth: process.env.REPLICATE_API_TOKEN!,
});

export const maxDuration = 300;

export async function POST(req: Request) {
  try {
    const { userId } = auth();
    const body = await req.json();
    const { prompt } = body;

    if (!userId) {
      return new NextResponse("Unauthorized", { status: 401 });
    }

    if (!prompt) {
      return new NextResponse("Prompt is required", { status: 400 });
    }

    const response = await replicate.run(
      "pnickolas1/sdxl-coloringbook:d2b110483fdce03119b21786d823f10bb3f5a7c49a7429da784c5017df096d33",
      {
        input: {
          prompt: `${prompt}, black and white coloring page, simple`,
          width: 800,
          height: 1600,
          negative_prompt: "complicated, a lot of details, colors",
          scheduler: "K_EULER",
        },
      }
    ) ;

    // Assuming response has imgUrl property
    const imgUrl = response.data.imgUrl[0]

    try {
      await prismadb.coloringSheet.create({
        data: {
          imgUrl: imgUrl,
          prompt: prompt,
          userId: userId,
        },
      });
      console.log("Image URL saved successfully!");
    } catch (error) {
      console.error("Error saving image URL:", error);
      // Handle the error here, potentially retry or log details
    }

    await prismadb.user.update({
      where: {
        userId: userId,
      },
      data: {
        credits: {
          decrement: 1,
        },
      },
    });

    return NextResponse.json({ imgUrl });
  } catch (error) {
    console.error("[VIDEO ERROR]", error);
    return new NextResponse("Internal error", { status: 500 });
  }
}

and the page where I call it:

"use client";
import React from "react";
import { formSchema } from "@/components/sidebar/constants";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { useRouter } from "next/navigation";
import axios from "axios";
import { Comic_Neue } from "next/font/google";
const kavoon = Comic_Neue({ weight: "700", subsets: ["latin"] });
const DashboardForm = () => {
  const router = useRouter();
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      prompt: "",
    },
  });

  const isLoading = form.formState.isSubmitting;

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
      await axios.post("/api/create", {
        prompt: values.prompt,
      });

      form.reset();
    } catch (error) {
      console.log(error);
    } finally {
      router.refresh();
    }
  };

  return (
    <div className=" flex flex-col h-screen bg-white text-black ">
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="  w-full p-4 px-3 md:px-6  h-full flex flex-col gap-4 border-r-black border-t-0 border-solid border-2"
        >
          {" "}
          <h1 className={`text-xl font-semibold ${kavoon.className}`}>
            Create a new coloring sheet
          </h1>
          <FormField
            name="prompt"
            render={({ field }) => (
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <Input
                    className="w-full pl-3"
                    placeholder="A lion driving an F1 car"
                    disabled={isLoading}
                    {...field}
                  />
                </FormControl>
              </FormItem>
            )}
          />
          <p className="w-full break-normal text-gray-500 text-sm ">
            Enter text describing the coloring sheet you want. Example prompts:
            'An astronaut riding a horse', 'A lion driving an F1 car'.
          </p>
          <Button
            className="col-span-12 lg:col-span-2 w-full bg-gradient-to-r from-purple-500  via-blue-600 to-pink-500  bg-300% animate-gradient"
            disabled={isLoading}
          >
            Generate
          </Button>
        </form>
      </Form>
    </div>
  );
};

export default DashboardForm;

It says that response doesn’t have data