Fetching OpenAI Image Generator Issue

Question

Good afternoon. I am trying to play with OpenAI. I am struggling to put n(number of images. n: 2) of generated images into the DOM.

Using React

const [image, setImage] = useState("");



const raw = JSON.stringify({
    prompt: `${ImgTitle()}`,
    n: 2,
    size: "1024x1024",
  });


const fetchImage = async () => {
    try {
      const response = await fetch(
        "https://api.openai.com/v1/images/generations",
        requestOptions
      );
      const jsonResponse = await response.json();
      setImage(jsonResponse.data[0].url);
    } catch (err) {
      console.log(err);
    }
  };

<img
            src={image}
            alt=""
            className="max-w-[70%] mt-4 shadow-md rounded-lg"
          />

The Response

"created": 1667620409,
    "data": [
        {
            "url": "https://oaidalleapiprodscus.blob.core.windows.net/private/org-oza2bHibFyD3WA2zWrBA2JPk/user-QxATSu1QMCbcxw4xLr0n3oE3/img-nxO7GGV0MjQ4P5FlIhwtnI0u.png?st=2022-11-05T02%3A53%3A29Z&se=2022-11-05T04%3A53%3A29Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2022-11-05T01%3A10%3A46Z&ske=2022-11-06T01%3A10%3A46Z&sks=b&skv=2021-08-06&sig=gRboFYVeG96yCRwpa8CUGTed%2BUMHvz5CTsCYzwK/OYs%3D"
        },
        {
            "url": "https://oaidalleapiprodscus.blob.core.windows.net/private/org-oza2bHibFyD3WA2zWrBA2JPk/user-QxATSu1QMCbcxw4xLr0n3oE3/img-vaN2oZJPOjgCwXA5D4E8YVS1.png?st=2022-11-05T02%3A53%3A29Z&se=2022-11-05T04%3A53%3A29Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2022-11-05T01%3A10%3A46Z&ske=2022-11-06T01%3A10%3A46Z&sks=b&skv=2021-08-06&sig=J4Ob8w1izivLOy6AeBqv6yQLF4nVURE6/MrJkLNMzqc%3D"
        }
    ]
}

I could only retrieve one url.