JSFiddle - React, Tailwind, and code Playground

JavaScript

const frameImage = [
            {
               	url: 'http://www.realmadryt.pl/fotki/_up/newsy/lukamodric_165.png'
            },
            {
                url: 'http://www.realmadryt.pl/fotki/_up/newsy/florentinoperez_11.jpg'
            },
            {
                url: 'http://www.realmadryt.pl/fotki/_up/newsy/ramosbarkinsta1.jpg'
            },
            {
                url: 'http://www.realmadryt.pl/fotki/_up/newsy/lukamodric_165.png'
            },
            {
                url: 'http://www.realmadryt.pl/fotki/_up/newsy/florentinoperez_11.jpg'
            },
            {
                url: 'http://www.realmadryt.pl/fotki/_up/newsy/ramosbarkinsta1.jpg'
            },
        ];
        
		let createdImages = [];
        
		frameImage.forEach(item => {
            const image = new Image();
            image.src = item.url;
            image.onload = () => {
                // set image only when it is loaded
                createdImages.push({
                    image,
                    width: image.width,
                    height: image.height,
                    x: 0,
                    y: 0,
                    draggable: true
                });
            };
        });
		console.log(createdImages)
        
        
        // nothing happens
        createdImages.forEach(item => {
        	console.log(item)
        });
        
        //also nothing happens
   		for(img in createdImages) {
        	console.log(img);
        }
        
        //length is actually 0?
        console.log(createdImages.length)