API Gateway Returning Server 500 Error Intermittently

Hi, I am struggling to debug an intermittent issue on my Web App (Amplify). I have a web app that displays images. When opening the webapp, a get request is made for each image on the page.

Essentially this is split into two API calls, first getImageLocation: API Gateway -> Lambda -> DynamoDB (which returns the image location path in S3) Then, getImage: Fetch straight from S3 Then, Display Image on Web App (Amplify).

Now the problem I'm faced with, is half the time it works fully, half the time a bunch of the images fail to load - it seems random. Sometimes 1 image fails to load, sometimes 5 fail to load - if you refresh enough times you manage to get all images to load. Here is an example below:

Now, I refresh the page and then they all load!:

If I look in the console errors it says it's a CORS issue - but I've configured that correctly as it works most of the time, so CORS must be working (with wild card '*' and the associated Headers) . The only thing I can assume is possibly some timing issue, something is running too fast or too slow?

UPDATE

Just adding, I have configured CloudWatch Logs on error events - where i can catch the error, but the "error": "$context.integrationErrorMessage", "message": "$context.error.message"} provides no useful insight as shown below:

{
    "requestId": "976f543a-e191-421f-9a2e-0ceb9f45a418",
    "extendedRequestId": "av_O-EniywMFVvw=",
    "ip": "121.223.130.209",
    "caller": "-",
    "user": "-",
    "requestTime": "11/Jul/2024:13:33:32 +0000",
    "httpMethod": "GET",
    "resourcePath": "/image/latest",
    "status": "500",
    "protocol": "HTTP/1.1",
    "responseLength": "36",
    "error": "-",
    "message": "Internal server error"
}