React App - Only some images in public folder show up in production, some don't

Question

In my React ("react": "^18.2.0") App I display Images in a Material UI MUI v5 CardMedia Component like so:

<CardMedia
    component="img"
    width="100%"
    src={process.env.PUBLIC_URL + "/Images/Light/MyImage.png"}
    //src={".\Images\Light\MyImage.png"} // tried this as well
    alt="Some alt description."
    sx={{
        objectFit:"contain"
    }}
/>

I have 6 cards in total but only 2 images show up in production (deployed on heroku).

Running locally everything works fine. When I replace the 4 that don't show up with those that do show up, all images are loading (but I have 3 copies of the same 2 cards of course).

All images come from the same folder, they have about the same size (~100KB) and a fairly similar name. I don't see any errors in the console and when inspecting the page in the network tab the status code for the missing images is Status Code: 200 OK as well. The alt prop of the image also does not show up next to the broken image icon (see screenshot).

What can be the reason? I have no clue what I should be looking for ):

Thanks!

Edit: I created the app with create-react-app and my images are placed inside the public folder. When I put them inside the src folder and include like so it works:

<CardMedia
    component="img"
    width="100%"
    image={require('./Images/MyImage.png')}
    alt="Some alt description."
    sx={{
        objectFit:"contain"
    }}
/>

But having static files in the src folder is not exactly best practice I assume.