I'm facing some odd behavior when expanding the GET request data in the console. Anyone know why I get this little blue ! saying The value was evaluated upon first expanding. it may have changed since then.

I'd like to eventually pass this value down to the Gallery component where hopefully it only fires once AND it's easily accessible.

console.log(resp); displays {data: Array(3), status: 200, statusText: 'OK', headers: {…}, config: {…}, …} with the correct data. When expanded, I see the little blue !

console.log(uploadsData); (hook variable) displays {resp: {…}} but it's empty inside. When expanded, I see the little blue !

Can anyone tell me how to rectify this?

import { useEffect, useState } from 'react';
import { BrowserRouter as Router, Switch, Route, useHistory} from 'react-router-dom';
import ReactDOM from 'react-dom';
import '../../sass/HomePage/homePage.scss';
import LoginRegister from "./LoginRegister/LoginRegister";
import Gallery from "./Gallery/Gallery";

const App = () => {
    const [uploadsData, setUploadsData] = useState({
        resp: {}
    });
    let { push } = useHistory();
    let authToken = localStorage.getItem('token');

    useEffect(() => {
        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});
                    console.log(uploadsData)
                }).catch(error => {
                console.log(error);
            });
        };
        if (authToken !== null) {
            getUploads();
            push('/gallery');
        } else {
            console.log("User's NOT authenticated, returning to login view");
            push('/');
        }
    }, [push, authToken]);


    return (
        <>
            <Switch>
                <Route exact path="/" component={LoginRegister} />
                <Route exact path="/gallery" component={Gallery} />
            </Switch>
        </>
    );
}

export default App;

if (document.getElementById('example')) {
    ReactDOM.render(<Router><App/></Router>, document.getElementById('example'));
}