How can I mix custom layers with transparent fill-extrusion layers in Mapbox GL JS?

Question

Mapbox GL JS allows you define custom layers that can use tools like Three.js to achieve effects that are impossible using the built-in layer types such as fill-extrusion.

Custom and built-in layer types can be mixed and matched. Here's a red cube rendered with Three.js in front of a 50% transparent green fill-extrusion layer:

This looks fine until I spin around and look at the red Three.js cube behind the green fill-extrusion layer:

While the red Three.js cube is rendered behnd the green fill-extrusion layer, there's a strange visual effect where you can't see the cube behind the transparent fill-extrusions. Instead, you see straight through it to the background map.

Is it possible get custom layers working as you'd expect with transparent fill-extrusion layers? Here's a codepen for this example using some of the code from this question.

const x = -74.0445;
const y = 40.6892;

const map = new mapboxgl.Map({ /* ... */ });
map.on('load', () => {
  map.addSource('boxes', { type: 'geojson', data: { /* ... */ }})
  map.addLayer({
    id: 'boxes',
    type: 'fill-extrusion',
    source: 'boxes',
    paint: {
      'fill-extrusion-color': 'green',
      'fill-extrusion-base': ['get', 'min_height'],
      'fill-extrusion-height': ['get', 'height'],
      'fill-extrusion-vertical-gradient': false,
      'fill-extrusion-opacity': 0.5,
    }
  });
});
class BoxCustomLayer { /* ... see codepen link ... */ }

let boxLayer = new BoxCustomLayer('box')

map.on('load', () => {
  map.addLayer(boxLayer);
});