Polygon layer has a white background which covers base maps - leaflet

Question

I am currently creating a webmap with leaflet. I used leaflet.ajax to import polygons from a geojson. But the new polygon layer covers the basemap, resulting in the polygons on a white background.
https://virgilxw.github.io/Singapore_Election_1955/
If you go the github page and navigate to the layer menu, you can find the polygon layer under "Data".
I have tried re-ordering the layers, but moving the base map above the polygons just result in the polygons being covered.
// Default base Map
map.addLayer(layerOneMapSG_Default);
// Add geojson
var Layer1955Wards = new L.GeoJSON.AJAX("data/wards1955.geojson");
// Styled Layer Control
var baseMaps = [
{
groupName: "Base Maps",
expanded: true,
layers: {
"OneMap": layerOneMapSG_Default
}
}];
var overlays = [
{
groupName: "data",
expaned: "true",
layers: {
"Constituencies": Layer1955Wards
}
},
{
groupName: "Map Overlays",
expanded: "true",
layers: {
"1953 Topological": Layer1953Topo,
"1953 Aerial Photographs": Layer1953Aerial
}
}];
var styledLayerControlOptions = {
container_width: "300px",
container_maxHeight: "350px",
group_maxHeight: "80px",
exclusive: false
};
var styledLayerControl = L.Control.styledLayerControl(baseMaps, overlays, styledLayerControlOptions);
map.addControl(styledLayerControl, overlays);