Реагировать на хук useState, не обновляющий состояние onClick

Я использую хуки useState в React, и состояние geojson не будет обновляться в <source data={geojson}>, когда _updateData запускается onClick. Я думаю, что useEffect перезаписывает обновленный geojson, который изменяет onClick в функции _updateData. Что мне здесь не хватает, чтобы обновить состояние {geojson}? Я намерен использовать useEffect для начальной загрузки goejson. Спасибо за помощь. Используемая библиотека Mapbox: https://uber.github.io/react-map-gl/#/

const Map = () => {
    const [viewport, setViewport] = useState({longitude: -98.58, latitude: 39.83, zoom: 3.5})
    const [geojson, setGeojson] = useState(null)

    useEffect(() => {
        // GeoJSON
        const locations = [];
        let ref = fire.database().ref("...").orderByKey();
        ref.once("value", snapshot => {
            snapshot.forEach(function(childSnapshot) {
                if (childSnapshot.val().Company !== "") {
                    locations.push(childSnapshot.val());
                }
                if (locations.length === 1219) {
                    var geojson = {
                        type: "FeatureCollection",
                        features: locations.map(item => {
                            return {
                                ...
                                },
                                geometry: {
                                type: "Point",
                                coordinates: [item.Long, item.Lat]
                                }
                            };
                        })
                    };
                    setGeojson(geojson);
                    return geojson;
                }
            });
        })
    });

    const _updateViewport = () => {
        setViewport(viewport)
    }

    const _updateData = () => {
        const locations = [];
        let ref = fire.database().ref("...").orderByKey();
        ref.once("value", snapshot => {
            snapshot.forEach(function(childSnapshot) {
                if (childSnapshot.val().Company !== "" && childSnapshot.val().Size === "Large") {
                    locations.push(childSnapshot.val());
                }
                if (locations.length === 232) {
                    var geojson = {
                        type: "FeatureCollection",
                        features: locations.map(item => {
                            return {
                                ...
                                },
                                geometry: {
                                type: "Point",
                                coordinates: [item.Long, item.Lat]
                                }
                            };
                        })
                    };
                    console.log(geojson);
                    setGeojson(geojson);
                    return geojson;
                }
            });
        })
    }

    return (
        <ReactMapGL
            {...viewport}
            onViewportChange={_updateViewport}
            width="100%"
            height="100%"
            mapStyle={mapStyle}
            mapboxApiAccessToken={TOKEN}>
            <Source type="geojson" data={geojson}>
                <Layer {...icon} />
            </Source>
            <div style={navStyle}>
                <NavigationControl onViewportChange={_updateViewport} />
                <button style={navStyle} onClick={_updateData}>Update</button>
            </div>
        </ReactMapGL>
    );
}

export default Map;