Onclick will add a div that should not overlap other divs ( React.js)

Assume that we have a container div which have a width equal to 600, and a height equal to 600, now When I click a button, a div should be placed inside that container,and when I click the button again a new div will be created and also placed in the container, but it should not overlap the other divs, and if the divs sizes that has been added due to the button click became greater than the container, then we should display a message where we say no enough space.

You can think of this problem as a room where you want to place items in it,the items will be added randomly in the room when you click a button but the items should not overlap the other items, and if there is no space left in the room, then we should display a message where we say no space left.

Can someone help me write a react code to do this logic