For those who come across this thread, I found cause of my problem and the solution. So I will document it here for anyone who is looking for a fix.
It turns out I was using the Lightbox Link element incorrectly. What I was doing was creating 1 lightbox and loading it up with multiple images. I also was putting rows into the lightbox with the Flex setting on it and then adding multiple div’s with image elements inside them into that row. For some reason I expected all this to link up (lol yea yea, mistake).
Here are some images to demonstrate what I’m talking about:
The problem was that the Lightbox would always display the first image of the gallery instead of displaying the image a user clicked on.
Here is the solution:
Instead of creating rows inside of 1 Lightbox, I create 1 container Div with Flex that had multiple Lightboxes in it. Each of these Lightboxes are then linked with the same Group name and 1 unique image loaded into it. Here are some images to demonstrate this:
By building my Lightboxes in this manner, I can still use the power of Flex and have the Lightbox functionality without any custom code or custom interactions, and it fixes the user experience by displaying the image that a user clicks on while still maintaining all the thumbnails at the bottom.
Hope all that made sense.