Image grid showing the correct src URL, but displaying the wrong image

Queries and Resources
1

Hello!
I'm running into a strange issue with an app I'm building and I'm wondering if anyone has some advice. I'm trying to build an app for a user to upload images from their mobile device. This app makes use of the s3Uploader component to both upload and display the images using a temporary state object.

The issue I'm running into is that when I remove an image from the state, and replace it with a new one, the grid continues to display the old image even though the state has been updated to the new image. Here's a video of the behavior:

Any help or advice would be appreciated!

2

Turns out this was an error on my part.
What happened was that I had an incrementor in my state called "count" that I was using for both the image position in my state (IE, if count === 1, then the image being added is the 1st image in my array) HOWEVER, I was also using that count to name my images (IE, img1, img2, img3, etc.) So when I deleted img1, and replaced it, they were both named something like "img1.png". That was causing issues, as it was still fetching the original img1, so that was what was being displayed.
Giving each uploaded image a unique name solved the problem!

3