在React中从Firebase获取映射的图片数组的网址

我正在建设的网站（https://github.com/kimcoder/react-simple-image-slider）上有一个有效的图片滑块，它通过'Object.values(images)'输入一个图片数组。我想换成一个网格数组（https://github.com/benhowell/react-grid-gallery），但我在从对象数组中获取图片的URL并显示它们时遇到了麻烦。

非常感谢任何帮助，我是react的新手，对这个问题已经挠头好几天了。

这是我的Firebase数据库的图片结构，在帖子本身中是这样的：

Here's the code I have from the page:
import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { DatabaseContext } from '../contexts/database-context';
import Gallery from 'react-grid-gallery';
import '../scss/pages/HomeDetailPage.scss'

function HomeDetailPage() {
    const { GetSelectedListingDetail, GetListingOwner, selectedListing, listingOwner } = useContext(DatabaseContext);
    const {
        address,
        bathrooms,
        bedrooms,
        creationDate,
        description,
        images,
        postKey,
        latitude,
        longitude,
        postRef,
        postUrl,
        poster,
        price,
        rawPrice,
        squareFeet,
        view_Count,
        isHighlighted
    } = selectedListing || '';

    const { email } = listingOwner || '';
    const params = useParams();

    const [isLoading, setIsLoading] = useState(true);

    const getImages = (images) => {
        return Object.values(images)
    }

    useEffect(() => {
        const { id } = params;
        GetSelectedListingDetail(id)
    }, [params]);

    useEffect(() => {
        if (selectedListing !== null) {
            setIsLoading(false);
        }
    }, [selectedListing]);

    useEffect(() => {
        if (poster) {
            GetListingOwner(poster)
        }
    }, [poster])

    if (isLoading && selectedListing === null) {
        return <progress className="progress is-small is-info" max="100">60%</progress>

    }

    const IMAGES =
    [{
            src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
            thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
            thumbnailWidth: 320,
            thumbnailHeight: 174,
            isSelected: true,
            caption: "After Rain (Jeshu John - designerspics.com)"
    },
    {
            src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
            thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
            thumbnailWidth: 320,
            thumbnailHeight: 212,
            tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
            caption: "Boats (Jeshu John - designerspics.com)"
    },
    
    {
            src: `${Object.values(images).toString()}` //doesn't load image
    }]


    return (

        <div className='detailBg'>
            <div className='home-detail-page'>
                <div className="home-detail-page-col-1">
                    {/*images go here */}
                    <Gallery images={Object.values([images])}/>
                    
                </div>

                <div className="home-detail-page-col-2">
                    <div className="detailDiv">


                        <div className="propInfo">
                            <p className="title is-2 mb-5">{price}</p>
                            <p className="subtitle is-6 mb-2">{address}</p>
                            <p className="subtitle is-6">{bathrooms + ' ' + bedrooms + ' ' + squareFeet}</p>

                        </div>

                        <div className="contactBtn">
                            <a className="button is-info" href={`mailto:${email}`}>Contact Owner</a>
                        </div>

                        <div className="propDesc">
                            <p className="title is-5">Property Overview:</p>

                            <p className="title is-6 pb-4">
                                {description}
                            </p>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    )
}

export default HomeDetailPage;