I'm working on a React project where I need to display images on a graph using the x,y coordinates linked to them.

All the images are in hexagonal shapes (PNGs) and have same sizes.

Problem: If 2 images have same X,Y coordinates, one of them overlaps the another. What is the ideal way to deal with such situations? I want the users to see part of both images.

Here is a sample image from the DOM structure.