ReactMapGL add points from geoJSON - oop

Question

I'm trying to add geoJSON points to my ReactMapGL but it doesn't seem to be rendering...there aren't any errors from console either
my code is as follows
const Map = ({ question, updateCurrent }) => {
const [viewport, setViewport] = useState({
width: 400,
height: 400,
latitude: -41.189,
longitude: 175.309,
zoom: 4.49,
})
const mapData = {
features: [
{
type: 'Feature',
properties: {
name: 'Canterbury',
},
geometry: {
coordinates: [172.479644, -43.475418],
type: 'Point',
},
id: '28682b312c41375af64f65b452c4c32c',
},
{
type: 'Feature',
properties: {
name: 'Southland',
},
geometry: {
coordinates: [167.905597, -45.838703],
type: 'Point',
},
id: '317db867d0fc3c2f629cf4cea1df3077',
},
{
type: 'Feature',
properties: {
name: 'Gisborne',
},
geometry: {
coordinates: [177.926385, -38.53651],
type: 'Point',
},
id: '3b30468c228e2ee576cc1943f86dfe75',
},
{
type: 'Feature',
properties: {
name: 'Manawatu - Wanganui',
},
geometry: {
coordinates: [175.434562, -39.524608],
type: 'Point',
},
id: '79df70a0e4371c7eb0d7db4db9a86b06',
},
{
type: 'Feature',
properties: {
name: 'West Coast',
},
geometry: {
coordinates: [172.185093, -41.514477],
type: 'Point',
},
id: '7f471be1cdfe51a2b5d7ca0c5c826c64',
},
{
type: 'Feature',
properties: {
name: 'Nelson / Tasman / Marlborough',
},
geometry: {
coordinates: [172.981906, -41.267511],
type: 'Point',
},
id: '806c715276e1ef82edd796e5934f8e4a',
},
{
type: 'Feature',
properties: {
name: 'Wellington - Wairarapa',
},
geometry: {
coordinates: [175.486838, -41.197457],
type: 'Point',
},
id: '9768592cef2eee2dc7f6e874e1944084',
},
],
type: 'FeatureCollection',
}
return (
<Container>
<ReactMapGL
{...viewport}
width="80vw"
height="70vh"
mapStyle="mapbox://styles/mapbox/light-v9"
onViewportChange={nextViewport => setViewport(nextViewport)}
mapboxApiAccessToken={MAPBOX_TOKEN}
>
<Source id="New Zealand" type="geojson" data={mapData} />
<Layer
id="anything"
type="fill"
source="New Zealand"
paint={{ 'fill-color': '#228b22', 'fill-opacity': 0.4 }}
/>
</ReactMapGL>
</Container>
)
}
My current output is
And my expected output is this (From mapbox Studio)
Could someone help me out please? I can't seem to find too much info about this

Answer 1

Your source data consists of only points yet in your Layer you've set type="fill". Fill type only applies to polygons not points or lines. You'll want to add either a circle or symbol layer instead for points.