Blinking rectangle

I wanted to make blinking rectangle with for loop. I created this code:

Function makeRectangle creates rectangle.
Function blink takes created rectangle to change color.
It works but only once. Can someone explain me why?

function makeRectangle(width, height, color, x, y) {
	let rectangle = svg.append('rect').attr('height', height).attr('width', width).attr('x', x).attr('y', y).attr('fill', color);
	return rectangle;
}

function blink(rectangle, color, repeat) {
	for (let i=0; i<repeat; i++) {
		rectangle.transition().duration(1500).attr('fill', color).transition().duration(1500).attr('fill', 'red');
		console.log('Repetition: ', i)
	}
	
}

let rect2 = makeRectangle(20, 20, 'red', 20, 20);
blink(rect2,'yellow', 5);

I recreated this in playground, and it works, but not as one would expect.ddue to the way that js handles the execution stack, it directly fires off all 5 directly after the other. because of the speed at which this happens, nothing is actually displayed. If we had access to settimeout, we could pop a wait in there and watch it.