I need some help in implementing the logic to open an Image Component on click on the list of the images dynamically under each row of images.

Use-Case: Open a selected image component onClick on the list of images in the UI. (Note: The number of images may vary depending on the User, If the user clicks to view the image in the first row, the selected image component should be opened under the first row and it should be in the center of the div. if the user clicks the image in the 2nd row, the selected image component should be opened under the 2nd row, and so on.

My Approach - I'm displaying data using the map function and I was trying to display the selected image under a specific row but the issue I was facing is the selected image component is not center-aligned under each row and going outside.

I'm sharing the screenshot and code sandbox link - https://codesandbox.io/s/compassionate-alex-rs5r7b?file=/src/Photocropper.tsx

Please go through my sandbox link for reference and let me know for any alternate solution for this issue.