Why are my Map overlays/markers all clogged up on the edge (top-left) of the Map component?

Question

I get all data after making an API call based on the visible map boundaries. The data has coordinates in it. Hovering over the overlays/markers show the coordinates are being received (as shown in the pic). Pigeon-maps is used for this project.

Sample api response-> placeNames = [{..}, {..}, {location_id: '271918', name: 'The Burren', latitude: '53.04881', longitude: '-9.139942', num_reviews: '713', …}]

<Map provider={maptilerProvider} height={'85vh'} center={coordinates} zoom={zoom}
            onBoundsChanged={({ center, zoom, bounds }) => {
                setCoordinates(center)
                setZoom(zoom)
                setBounds(bounds)
            }}
        >
            {isLoading ? <div>Loading</div> : placeNames?.map((pla, i) =>

                <div key={i}>


                    <Overlay anchor={[pla.latitude, pla.longitude]} >
                        <div key={i} onClick={() => setIconClicked(i)} onMouseOver={() => setVisible(i)} onMouseLeave={() => setVisible(100)} >
                            <MdLocalHotel />
                            {visible === i &&
                                <div className='bg-yellow-100 rounded-lg p-1 font-bold px-1 text-xs'>{pla.name}
                                    <div className='text-gray-700 text-right font-medium pt-0.5'>Latitude: {pla.latitude} Longitude: {pla.longitude}

                                    </div>
                                </div>}

                        </div>
                    </Overlay>

                </div>


            )}

        </Map >