Why’s only one image being displayed instead of all the images present in the object?

I’m facing a weird issue where only the first image that’s present in the object is being displayed via the Grid component instead of all of them being displayed at once (there are three images in total). It’s basically justifiable grabbing the first URL and displaying and ignoring the other images URLs present in the object.

Note: Upon expanding the object in the console I see a blue ! that says: The value was evaluated upon first expanding. It may have chaneged since then.. I’m not sure if this has anything to do with the issue I’m facing, I’m just including it here for extra information.

Anyone know what the issue could be and how I can fix it?

Here’s Gallery.js:

import React, { useEffect, useState } from 'react';

const Gallery = () => {
    let authToken = localStorage.getItem('token');

    const [uploadsData, setUploadsData] = useState([]);

    // Referring the uploadsData inside the useEffect hook's callback and in order to get correct console log,
    // Run the code in a separate useEffect hook.
    // In this way, the getUploads function is called only once and it outputs correct uploadData to the browser console.
    useEffect(() => {
        getUploads();
    }, []);

    useEffect(() => {
        // logs empty array in the console if dependency array is empty
        // logs correct data when dependency array isn't empty - i.e. [uploadsData]
        // console.log(uploadsData);
    }, [uploadsData]);

    const getUploads = () => {
        const headers = {
            "Accept": 'application/json',
            "Authorization": `Bearer ${authToken}`
        }

        axios.get('http://localhost:8005/api/get-uploads', {headers})
            .then(resp => {
                // console.log(resp);
                setUploadsData([resp.data]);
            }).catch(error => {
            console.log(error);
        });
    };

    return (    
            {
                uploadsData.map((photos, index) => {
                    console.log(photos, index);
                    return <Grid src={photos[index].url} key={index}/>
                })
            }
    );
}

export default Gallery;

Here’s Grid.js:

import React, { useEffect } from 'react';

const Grid = (props) => {
    useEffect(() => {
        createUserPhotoNodes();
    }, []);

    const createUserPhotoNodes = () => {
        return (
            <div className="container">
                <div className="img-container">
                    <img src={props.src} alt="Photo" className="gallery-img" />
                </div>
            </div>
        );
    }

    return (
        <>
            <section className="gallery">
                {createUserPhotoNodes()}
            </section>
        </>
    );
}

export default Grid;