ReactMapGL add points from geoJSON

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