REACT: add geojson data to deck.gl & react-map-gl - reactjs

Question

I am trying to graph a very simple data here https://raw.githubusercontent.com/pennytalalak/road-crash-data/master/src/data/output.geojson
But it wouldn't display the data on the map. Not sure if it is my geojson file or my code as my console said
Here is my code:
import React, { Component } from "react";
import { StaticMap } from "react-map-gl";
import DeckGL, { GeoJsonLayer } from "deck.gl";
//Mapbox Token
const MAPBOX_TOKEN =
"###########################";
//Geojson Data URL
const DATA =
"https://raw.githubusercontent.com/pennytalalak/road-crash-data/master/src/data/output.geojson";
const LIGHT_SETTINGS = {
lightsPosition: [-125, 50.5, 5000, -122.8, 48.5, 8000],
ambientRatio: 0.2,
diffuseRatio: 0.5,
specularRatio: 0.3,
lightsStrength: [2.0, 0.0, 1.0, 0.0],
numberOfLights: 2
};
const INITIAL_VIEW_STATE = {
latitude: -35.280937,
longitude: 149.130005,
zoom: 13,
pitch: 0,
bearing: 0
};
export default class Map extends Component {
renderLayer() {
const { data = DATA } = this.props;
return [
new GeoJsonLayer({
id: "geoJson",
data,
filled: true,
lightSettings: LIGHT_SETTINGS
})
];
}
render() {
const { viewState, baseMap = true } = this.props;
return (
<DeckGL
layers={this.renderLayer()}
initialViewState={INITIAL_VIEW_STATE}
viewState={viewState}
controller={true}
>
{baseMap && (
<StaticMap
mapStyle="mapbox://styles/mapbox/dark-v9"
preventStyleDiffing={true}
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
)}
</DeckGL>
);
}
}