I am attempting to retrieve and display images from S3 using a signed URL. I can log the Signed URL to the console, click it, and it will download the image locally. The downloaded image is not corrupted in any way.

: Component Hierarchy

App
- Maps
-- Map

The App component manages filtering of maps, the filtered maps state is then passed to the Maps component which dynamically renders Map components.

export default function Maps({ maps }) {
    return (
        <Carousel
            autoPlay={false}
            PrevIcon={<ArrowCircleLeftIcon fontSize='large' />}
            NextIcon={<ArrowCircleRightIcon fontSize='large' />}
        >
            {maps.map((map, i) => (
                <Map key={i} map={map} />
            ))}
        </Carousel>
    )
}

My Map component holds state containing the Maps Image URL, and a useEffect hook which calls a getImg function.

export default function Map({ map }) {
    const [mapImg, setMapImg] = useState(null)

    useEffect(() => {
        if (map.uri) {
            getImg(map.uri).then((res) => {
                console.log(res)
                setMapImg(res)
            })
        }
    }, [map.uri])

return (
    <CardMedia
        component='img'
        alt='random nature'
        height='550'
        image={mapImg}
    />
)

Finally, the getImg function.

export const getImg = (uri) => {
    const uriToS3Path = (uri) => {
        let path = uri.substring(0, 6)
        const file = uri.substring(6) + '.TIF'
        path = path.split('').join('/') + '/'
        return path + file
    }

    const filePath = uriToS3Path(uri)
    return Storage.get(filePath, { contentType: 'image/tiff' })
}

Don't be confused by map.uri, basically this property determines the key for the S3 object, hence the uriToS3Path function as above. I don't receive any debug errors, I can retrieve the link but the image does not display. Is it due to some asynchronous activity or should the entire approach to fetching be altered?

Many Thanks.

Update: Inspecting the Application tab within the developer console. You can see that the S3 Image is listed (92.TIF), but the preview is broken.