I am trying to display some data that I fetched from the database in the UI. However, only part of the returned data is showing even though route handlers are setup to return all the saved data. This below is a copy of my route.js code:

import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function POST(req) {
    let script = null;
    let user = null;

    try {
        const body = await req.json();
        script = body.script;
        user = body.user;

        // Validate input
        if (!script || !user) {
            throw new Error("Invalid request payload: 'script' and 'user' are required.");
        }

        if (!script.id) {
            throw new Error("Script ID is required.");
        }

        if (!Array.isArray(script.scenes)) {
            throw new Error("Scenes must be an array.");
        }

        const appwriteId = user?.$id;
        if (!appwriteId) {
            throw new Error("User ID is required.");
        }

        // Ensure the user exists in the database
        const foundUser = await prisma.user.upsert({
            where: { appwriteId },
            update: {},
            create: {
                appwriteId,
                email: user.email,
                name: user.name,
            },
        });

        // Upsert the script
        const savedScript = await prisma.script.upsert({
            where: { id: script.id },
            update: {
                title: script.title || '',
                type: script.type || 'feature',
                genre: script.genre || '',
            },
            create: {
                title: script.title || '',
                type: script.type || 'feature',
                genre: script.genre || '',
                userId: foundUser.id,
            },
        });

        if (!savedScript || !savedScript.id) {
            throw new Error('Failed to upsert script.');
        }

        // Delete related entities before deleting scenes
        const existingSceneIds = (
            await prisma.scene.findMany({
                where: { scriptId: savedScript.id },
                select: { id: true },
            })
        ).map((scene) => scene.id);

        if (existingSceneIds.length > 0) {
            // Delete lines related to sceneCharacters
            await prisma.line.deleteMany({
                where: { sceneCharacter: { sceneId: { in: existingSceneIds } } },
            });

            // Delete sceneCharacters related to scenes
            await prisma.sceneCharacter.deleteMany({
                where: { sceneId: { in: existingSceneIds } },
            });

            // Delete the scenes themselves
            await prisma.scene.deleteMany({
                where: { id: { in: existingSceneIds } },
            });
        }

        // Recreate scenes
        const scenesWithScriptId = script.scenes.map((scene, index) => ({
            title: scene.title || '',
            location: scene.location || '',
            description: scene.description || '',
            shot: scene.shot || '',
            order: index,
            scriptId: savedScript.id,
        }));

        if (scenesWithScriptId.length > 0) {
            await prisma.scene.createMany({
                data: scenesWithScriptId,
            });
        }

        // Fetch the saved script with ordered scenes
        const fetchedScript = await prisma.script.findUnique({
            where: { id: savedScript.id },
            include: {
                scenes: {
                    orderBy: { order: 'asc' },
                },
            },
        });

        return NextResponse.json(fetchedScript);
    } catch (error) {
        console.error('Error while saving script:', {
            message: error.message,
            stack: error.stack,
            script,
            user,
        });

        return NextResponse.json(
            { error: "An error occurred while saving the script." },
            { status: 500 }
        );
    }
}

export async function GET() {
    try {
        const scripts = await prisma.script.findMany({
            include: {
                scenes: {
                    include: {
                        sceneCharacters: {
                            include: {
                                character: true,
                                lines: true,
                            },
                        },
                    },
                },
            },
        });

        console.log("SCRIPT FROM DB", scripts);

        return NextResponse.json(scripts);
    } catch (error) {
        console.error('Error while fetching scripts:', error.message);
        return NextResponse.json(
            { error: "An error occurred while fetching the scripts." },
            { status: 500 }
        );
    }
}

and the following is the UI code that fetches and displays the data:

import React, { useState, useEffect } from "react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from "@nextui-org/react";

const EditScript = ({
  isOpen,
  onClose,
  editScripts = [],
  selectedScriptId,
  user,
}) => {
  const [editableScript, setEditableScript] = useState(null);
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    if (!isOpen) return;
    const currentScript = editScripts.find(
      (script) => script.id === selectedScriptId
    );
    if (currentScript) {
      console.log("Fetched script:", JSON.stringify(currentScript, null, 2));
      setEditableScript(currentScript);
    } else {
      console.error(`Script with ID ${selectedScriptId} not found.`);
    }
  }, [isOpen, editScripts, selectedScriptId]);

  //Saving the data