javascript - generateAudioCaption and generateImage Functions Not Triggered After Successful API Response - Stack Overflow

I'm working on a Next.js app where I sequentially call functions to:

Generate a video script (GetVideoScript) Create an audio file from the script (GenerateAudioFile) Generate captions for the audio (GenerateAudioCaption) Generate images for each scene (GenerateImage) The first two functions work correctly. However, GenerateAudioCaption and GenerateImage are not being triggered even after successful API responses.

Here is my code:

 "use client";
import React, { useContext, useEffect, useState } from "react";
import SelectTopic from "./_components/SelectTopic";
 import SelectStyle from "./_components/SelectStyle";
import SelectDuration from "./_components/SelectDuration";
 import { Button } from "@/components/ui/button";
import axios from "axios";
import CustomLoading from "./_components/CustomLoading";
import { v4 as uuidv4 } from 'uuid';
import { VideoDataContext } from "@/app/_context/VideoDataContext";

function CreateNew() {
 const [formData, setFormData] = useState({});
 const [loading, setLoading] = useState(false);
 const [videoScript, setVideoScript] = useState();
 const [audioFileUrl, setAudioFileUrl] = useState();
 const [captions, setCaptions] = useState();
   const [imageList, setImageList] = useState();
    const { videoData, setVideoData } = useContext(VideoDataContext);

const onHandleInputChange = (fieldName, fieldValue) => {
    setFormData((prev) => ({
        ...prev,
        [fieldName]: fieldValue,
    }));
};

const onCreateClickHandler = () => {
    GetVideoScript();
};

const GetVideoScript = async () => {
    setLoading(true);
    const prompt = `Write a script to generate ${formData.duration} video on topic: ${formData.topic} along with AI image prompt in ${formData.imageStyle} format for each scene and give me result in JSON format with imagePrompt and ContentText as field.`;

    const resp = await axios.post("/api/get-video-script", { prompt: prompt });

    setVideoScript(prev => ({
        ...prev,
        'videoScript': resp.data.result
    }));

    resp.data.result && GenerateAudioFile(resp.data.result);
};

const GenerateAudioFile = async (videoScriptData) => {
    setLoading(true);
    let script = '';
    const id = uuidv4();

    videoScriptData.forEach(item => {
        script = script + item.ContentText + ' ';
    });

    const resp = await axios.post('/api/generate-audio', { text: script, id: id });

    setVideoScript(prev => ({
        ...prev,
        'audioFileUrl': resp.data.result
    }));

    setAudioFileUrl(resp.data.result);
    resp.data.result && GenerateAudioCaption(resp.data.result, videoScriptData);
};

const GenerateAudioCaption = async (fileUrl, videoScriptData) => {
    setLoading(true);

    const resp = await axios.post("/api/generate-captions", {
        audioFileUrl: fileUrl,
    });

    setCaptions(resp.data.result);
    setVideoScript(prev => ({
        ...prev,
        'captions': resp.data.result
    }));

    resp.data.result && GenerateImage(videoScriptData);
};

const GenerateImage = async (videoScriptData) => {
    let images = [];

    for (const element of videoScriptData) {
        try {
            const resp = await axios.post('/api/generate-image', {
                prompt: element.imagePrompt
            });
            images.push(resp.data.result);
        } catch (error) {
            console.log("Error:", error);
        }
    }

    setVideoScript(prev => ({
        ...prev,
        'ImageList': images
    }));

    setImageList(images);
    setLoading(false);
};

useEffect(() => {
    console.log(videoData);
}, [videoData]);

return (
    <div className="md:px-20">
        <h2 className="font-bold text-4xl text-primary text-center">Create New</h2>
        <div className="mt-10 shadow-md p-10">
            <SelectTopic onUserSelect={onHandleInputChange} />
            <SelectStyle onUserSelect={onHandleInputChange} />
            <SelectDuration onUserSelect={onHandleInputChange} />
            <Button className="mt-10 w-full" onClick={onCreateClickHandler}>
                Create Short Video
            </Button>
        </div>
        <CustomLoading loading={loading} />
    </div>
);

}

export default CreateNew;