Necesito ayuda para implementar la lógica para abrir un componente de imagen al hacer clic en la lista de imágenes dinámicamente debajo de cada fila de imágenes.

Caso de uso : abra un componente de imagen seleccionado al hacer clic en la lista de imágenes en la interfaz de usuario. (Nota: la cantidad de imágenes puede variar según el usuario. Si el usuario hace clic para ver la imagen en la primera fila, el componente de imagen seleccionado debe abrirse debajo de la primera fila y debe estar en el centro del div . si el usuario hace clic en la imagen de la segunda fila, el componente de imagen seleccionado debe abrirse debajo de la segunda fila, y así sucesivamente.

Mi enfoque : estoy mostrando datos usando la función de mapa y estaba tratando de mostrar la imagen seleccionada en una fila específica, pero el problema que enfrentaba es que el componente de la imagen seleccionada no está alineado en el centro debajo de cada fila y saliendo.

Estoy compartiendo la captura de pantalla y el enlace de sandbox de código: https://codesandbox.io/s/compassionate-alex-rs5r7b?file=/src/Photocropper.tsx

Vaya a mi enlace de sandbox como referencia y avíseme para cualquier solución alternativa para este problema.