Loading Dataset to Markers

[OOCAZ]

I am trying to load a dataset from a JSON object into a set of markers in pigeon-maps.

I am using a Next 13 stack and the following code is not working:

return (
    <div className="App" style={{padding: 20}}>
      <Map 
      height={'80vh'}
      width={'80vw'}
      center={[center[0],center[1], center[2]]}
      zoom={zoom} 
      onBoundsChanged={({ center, zoom }) => { 
        setCenter(center) 
        setZoom(zoom) 
      }} 
    >{coords.map((element, index) => (
    <React.Fragment key={element[2]}>
        <Marker 
        width={10}
        anchor={[parseFloat(element[0]), parseFloat(element[1])]} 
      >
          <ImAirplane style={{color:"black"}}/>
      </Marker>
    </React.Fragment>
))}

      <Marker 
        width={10} // this adds error zooming out and does not control size
        anchor={[39.69960614291127, -105.08409829929842]} 
      >
          <ImAirplane style={{color:"black"}}/>
      </Marker>
      <ZoomControl />
    </Map>
    </div>
  );

I render one marker outside of the Fragment and it works just fine. But the others are all rendering in the top left hand corner. Even if I change the values to be a hard coded number. Using console logs I can verify the numbers are coming through correctly, but the render is not giving me the markers in the correct position. This is the only error I get from the console:

Let me know if I am doing something wrong or if there is something else going on. Thank you and have a great day.

[OOCAZ]

All I had to do was remove the React.Fragment element as it was creating a new div that the map seemed to not like. Added a key tag into the Marker and the problem is solved.