React update list on state change with hooks - reactjs

Question

I am trying to make a photo album component in React which retrieves photo-urls from Firebase Storage and adds them to state with React Hooks. The problem is that the <img/> tags are never created, even though I can see that the image-urls are set correctly as state via the React Chrome Extension.
Complete code of the component:
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',
},
};
I am not that familiar with React and I am sure I have just misunderstood something. I apriciate any tips and help!

Answer 1

I actually solved this, the problem was that I didn't update the state when the images were loaded, I just pushed them to an array, so the view never re-rendered. I changed it to this:
function loadImages() {
const imagesRef = storageRef.child('/images');
imagesRef.listAll().then(res => {
res.items.forEach(resItem => {
resItem.getDownloadURL().then(url => {
setImages(oldArray => [...oldArray, url]) // This line has changed!
})
})
});
}
Now it works!