How do i make my fetchMovieDescription function to get called after the story state has changed?

I cant make the fetchMovieDescription function to get called only after my story state is changed, instead, it gets called in the same time as fetchBotReply and generates a random image instead of the one from the story result.

import { process } from '../env'
import { Configuration, OpenAIApi } from 'openai'
import { useState, useEffect } from 'react'
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(configuration)
export default function StoryPart() {
const [userInput, setUserInput] = useState("")
const [story, setStory] = useState("")
const [images, setImages] = useState("")
const [storyFetched, setStoryFetched] = useState(false);
useEffect(() => {
fetchMovieDescription(story);
}, [storyFetched])
const handleChange = (event) => {
setUserInput(event.target.value);
}
const handleSubmit = async (event) => {
event.preventDefault();
await fetchBotReply(userInput);
setUserInput("");
}
async function fetchBotReply(userInput) {
try {
const response = await openai.createCompletion({
model: 'text-davinci-003',
prompt: `You are an AI developed by OpenAI.
You have been trained on a vast range of internet text.
But unlike most AI models, your specialty is in creating unique and compelling movie scenarios.
You understand the elements of a great movie, including plot development, character arcs, conflict, and resolution.
You can generate scenarios in any genre, time period, or setting.
Your task is to write a scenario based on: ${userInput}.You must create the scenario so its easy to split it into 5
sections.The reason for it is that based on each section i will later ask you to write 5 detailed descriptions
of an image for later image generation.`,
max_tokens: 700,
temperature: 1
})
setStory(response.data.choices[0].text)
setStoryFetched(true)
} catch (error) {
console.log(error)
}
}
async function fetchMovieDescription(story) {
try {
const response = await openai.createImage({
prompt: `Create a descriptive and precise prompt for image generation based on this story: ${story}`,
n: 1,
size: "512x512",
response_format: 'url'
})
console.log(story)
setImages(response.data.data[0].url)
console.log(response.data.data[0].url)
} catch (error) {
console.log(error)
}
}
return (
<div className="StoryPart">
<form onSubmit={handleSubmit}>
<label>
Story:
<input value={userInput} type="text" name="story" placeholder='input prompt' onChange={handleChange}/>
</label>
<button type="submit" value="Submit">Submit</button>
</form>
{story? <p>{story}</p> : "Writing your story..."}
{images? <img src={images} alt="movie scene"/> : "Writing your images..."}
</div>
)
}

i tried making another state storyFetched to change after the story has changed but no effect.

Your useEffect will get fired once the storyFetched state is initialized (after the first render) and every time its value changes.

Since in this case you don't want to call fetchMovieDescription until the story is fetched, you can add an if statement inside the useEffect. If storyFetched is true it means the story is fetched and your function should be called.

This is a rewrite of the useEffect:

useEffect(() => {
If(storyFetched) {
fetchMovieDescription(story);
}
}, [storyFetched])

This way fetchMovieDescription only when storyFetched is true.