Custom Layer - Background Map goes white when clearing using threejs renderer

mapbox-gl-js version: (DeckGL 8.1.0 + react-map-gl 5.2.3)

Hello, I was experimenting with loading models using the custom layer interface and ran into a problem. I'm actually drawing the custom layer through DeckGL and react-map-gl, however I believe that the heart of the problem lies in the custom layer which belongs here so I'm asking the question here. Anyways the problem is pretty similar to issue #8936. However the solution there doesn't work but infact, it's the cause of the problem as far as I understood. If you try clearing manually or set renderer.autoClear to true, the underlying map disappears and only a white background is shown with the model laid on top.

This can be easily seen using the official example and it's jsfiddle. Just set autoClear to true.

I was actually experimenting with using post processing, which requires to use composer.render instead of renderer.render and the former clears the buffers during passes.

I thought this was due to a non transparent canvas issue perhaps and initialized the threejs renderer with a separate canvas, with alpha set to true and setting the clear color appropriately but nothing happens.

Sorry but I couldn't find out what mapbox-gl-js version the current react-map-gl uses. Also I apologize in advance for not providing any other necessary information but I'm new to react/js/mapbox and web programming. Thanks.

Some screencaps to demonstrate clearly what's happening,

clearColor all 0's and alpha 0.

ClearColor is red and alpha is 0.2.

Intended picture when using clearing (alpha 0 and clearColor all 0's),

Update:- Ok it seems like the transparency is working fine. This is because when I changed the clearColor to red and alpha to 0.4 I noticed there was a small time period where the map was shown with a red overlay like so

However as soon as the model appears, the map disappears and the image resembles the second one. So something's wrong there. If anybody atleast has a hint of what's the problem, I'd appreciate it as I'm out of ideas where to look further in threejs source code. Everything seems fine to me ;s

Start with the official add-3d-model example and its jsfiddle, enable renderer.autoClear, and reproduce the white background when the model appears. Trace the custom layer's Three.js rendering and clearing behavior; done means the underlying map remains visible while the custom model renders and buffers can still be cleared.