Реагировать на обновление списка при изменении состояния

Question

Я пытаюсь создать компонент фотоальбома в React, который извлекает фото-ссылки из Firebase Storage и добавляет их в состояние с помощью React Hooks. Проблема в том, что теги <img/> никогда не создаются, хотя я вижу, что URL-адреса изображений установлены правильно как состояние через расширение React Chrome.

Полный код компонента:

import React, {useEffect, useState} from 'react';
import {Fab} from "@material-ui/core";
import AddIcon from '@material-ui/icons/Add';
import {colorTheme} from "../constants/colors";
import firebase from 'firebase/app';
import '@firebase/firestore';
import '@firebase/auth';
import '@firebase/storage';

export default function PhotoAlbum() {

    const storageRef = firebase.storage().ref();

    const [images, setImages] = useState([]);

    useEffect(() => {
        loadImages();
    }, []);

    function loadImages() {
       let imageUrls = [];
        const imagesRef = storageRef.child('/images');
        imagesRef.listAll().then(res => {
            res.items.forEach(resItem => {
                resItem.getDownloadURL().then( url => {
                    imageUrls.push(url)
                })
            })
        }).then(() => setImages(imageUrls)); // I think this works, I can see the urls on the state
    }

    function handleChange(e) {
        let files = e.target.files;

        for(let i = 0; i < files.length; i++){
            const file = files[i];
            storageRef
                .child( `/images/${file.name}` )
                .put(file)
                .then( () => {
                    console.log( "Added file to storage! ", file.name );
                });
        }
    }

    return (
        <div>
            {images.map((url, index) => (
                <img src={url} key={index.toString()} alt={'this is an image'}/> // These are never rendered
            ))}
            <div style={styles.floatingContainer}>
                <input
                    accept="image/*"
                    style={styles.input}
                    id="contained-button-file"
                    multiple
                    type="file"
                    onChange={handleChange}
                />
                <label htmlFor={"contained-button-file"}>
                <Fab
                    color='primary'
                    aria-label='add'
                    style={styles.floatingButton}
                    component="span">
                    <AddIcon/>
                </Fab>
                </label>
            </div>
        </div>
    )
}

const styles = {
    floatingContainer: {
        borderRadius: '30px',
        position: 'absolute',
        right: '2vw',
        bottom: '2vh'
    },
    floatingButton: {
        backgroundColor: colorTheme.darkGreen,
    },
    input: {
        display: 'none',
    },
};

Я не настолько знаком с React и уверен, что что-то неправильно понял. Я приношу любые советы и помогу!