Mapbox GL JS: Displaying polygons from different coordinate systems / projections

I’m new to GIS and have access to OS MasterMap Topography Layer data (UK).

I’ve got it loaded into PostGIS and am querying the polygons that I’m interested in (buildings). My understanding is the coordinates are using EPSG:27700 (OS national grid). I’m converting these to 4326 using ST_Transform when retrieving them from the database.

I’m plotting them on a map using MapBox GL JS, however there are consistently out of alignment with the buildings on the base map.

Initially when I saw this, I just assumed it was a small difference in datasets, especially as the shapes are different.

However, when I use the OS vector tiles instead of the default tiles form Mapbox (using 3857 for the tiles as suggested in the OS demo) which are based on the OS MasterMap Topography layer (the same dataset that I’m using for my polygons), everything is still misaligned – but the shapes are correct.

I’m assuming my mistake is somewhere in converting between the different standards.

I’ve tried passing 3857 to my call to ST_Transform, but then the polygons don’t render at all.

Looking at the MapBox documentation, when it comes to plotting points / polygons on the map, they’re expecting coordinates based on WGS84 (4326): https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat

However, their documentation also states that they use EPSG:3857: https://docs.mapbox.com/help/glossary/projection/

Can anyone help with what I’m doing wrong / not understanding?

UPDATE spatial_ref_sys
SET proj4text = '"+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +units=m +no_defs +nadgrids=OSTN15_NTv2_OSGBtoETRS.gsb"'
WHERE srid '27700';