React Native: Download all images into a flatlist from Firebase storage

I am developing a fitness app using react-native. Currently, all of my exercise images are stored locally but I now am looking to download the images from the firebase storage instead. In Firebase I have uploaded 21 images inside an images folder, which has another 2 folders - foamRoll and stretches.

What I want to do

I want to download all 8 of my images from the foamRoll folder (inside firebase storage) into my Flatlist.

What I have done

In the code snippet below there is my entire foam roll screen code. I have left in my old code for getting locally stored files, and also my workings for (trying) to get new files by using useEffect. But I am stuck and the docs weren't helping!

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  FlatList,
  Image,
  TouchableOpacity,
  Modal,
  TouchableHighlight,
} from "react-native";

import { Colors } from "../colors/Colors";
import { firebase } from "../firebase/config";

const DATA = [
  {
    id: "1",
    title: "Calves",
    section: "Foam Roller",
    image: require("../../assets/FR1.png"),
  },
  {
    id: "2",
    title: "Tibialis Anterior (Shin)",
    section: "Foam Roller",
    image: require("../../assets/FR2.png"),
  },
  {
    id: "3",
    title: "Quads",
    section: "Foam Roller",
    image: require("../../assets/FR3.png"),
  },
  {
    id: "4",
    title: "ITB (Outside of legs)",
    section: "Foam Roller",
    image: require("../../assets/FR4.png"),
  },
  {
    id: "5",
    title: "Glutes (Bum)",
    section: "Foam Roller",
    image: require("../../assets/FR5.png"),
  },
  {
    id: "6",
    title: "Traps (Back)",
    section: "Foam Roller",
    image: require("../../assets/FR6.png"),
  },
  {
    id: "7",
    title: "Lats (Side)",
    section: "Foam Roller",
    image: require("../../assets/FR7.png"),
  },
  {
    id: "8",
    title: "Pecs (Chest)",
    section: "Foam Roller",
    image: require("../../assets/FR8.png"),
  },
];

export default function ExercisesScreen() {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentItem, setCurrentItem] = useState({});
  const [entities, setEntities] = useState([]);

  const entityRef = firebase.firestore().collection("entities");
  const storageRef = firebase.storage().ref("images/foamRoll");

  useEffect(() => {
    storageRef.list().then((result) => {
      // Loop over each item
      result.items.forEach((pics) => {
        firebase
          .storage()
          .ref()
          .child("images/foamRoll")
          .getDownloadURL()
          .then((url) => {
            console.log(url);
            //these url will be used to display images
          });
      });
    });
  }, []);

  const Item = ({ item }) => (
    <View style={styles.item}>
      <Image source={item.image} style={styles.exerciseImage} />
      <View style={styles.detailSection}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.section}>{item.section}</Text>
      </View>
      <TouchableOpacity
        style={styles.viewButton}
        onPress={() => {
          openSettingsModal(item);
        }}
      >
        <Text style={styles.viewText}>View</Text>
      </TouchableOpacity>
    </View>
  );

  const openSettingsModal = (item) => {
    setCurrentItem(item);
    setModalVisible(!modalVisible);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.tabBackground}>
        <Text style={styles.subTitle}>EXERCISES: FOAM ROLLER</Text>
      </View>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>{currentItem.modalTitle}</Text>
            <Text style={styles.modalText}>{currentItem.modalDesc}</Text>
            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item item={item} />}
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({})