Source and Layer component does not show if data changes

Question

I am trying to build a GPS-Tracker using react-map-gl and want to draw a line with the data retreived from the where-is-iss-API. If the coordinates in the source JSON are initilized staticaly the line is shown.

   const [geojson, setGeojson]: any = useState(
            {
                type: "Feature",
                geometry: {
                    type: "LineString",
                    coordinates: [
                        [-77.0323, 38.9131],
                        [-80.0323, 40.9131]
                    ]
                },
                properties: {
                    "name": "Route"
                }
            });

but when addind data via useEffect it isn't displayed

const [data, setData]: any = useState(dataProp);

const updateLayer = () => {
        console.log(data)
        if (data.latitude !== undefined && data.longitude !== undefined) {
            setGeojson({
                ...geojson,
                geometry: {
                    coordinates: [
                        ...geojson.geometry.coordinates,
                        [data.longitude, data.latitude]
                    ]
                }
            })
        }
        console.log(geojson);
    }

    useEffect(() => {
        setData(dataProp);
        if(data !== undefined && data !== null){
            updateLayer();
        }
    }, [dataProp]);

In this case the line is only displayed for the first two coodinates.

const route: LayerProps = {
    id: 'route',
    type: 'line',
    source: 'geojson',
    paint: { 'line-color': 'red', "line-width": 4 }
};
return (
        <div>
            <ReactMapGL
                {...viewport}
                mapboxApiAccessToken={token}
                mapStyle={"mapbox://styles/gobsej/ckomzwjdg377w18ozdhm1by36"}
                width="100vw"
                height="100vh"
                onViewportChange={(viewport: React.SetStateAction<{ latitude: number; longitude: number; zoom: number; }>) => setViewport(viewport)}
            >
            <Source id="my-data" type="geojson" data={geojson}>
                    <Layer {...route} />
            </Source>

            </ReactMapGL>
        </div >
    );

The data is retreived with axios and given to the component as a prop

const getGPSLocation = async () => {
        await Axios.get('https://api.wheretheiss.at/v1/satellites/25544').then((response) => {
            console.log(response.data);

            setData(response.data);
        }).catch((error) => {
            console.log(error);
        });

    };
    useEffect(() => {
        getGPSLocation();
        const interval = setInterval(getGPSLocation, 1000)

        return () => { 
            clearInterval(interval); }
    }, []);
    
    return (
        <div>
            <Map dataProp={data}></Map>
        </div>
    );

The console output is the following: https://i.stack.imgur.com/oZIlb.png