How can I use r3f with an existing WebGLRenderingContext? (i.e. mapbox-gl)

[AlexandrosGounis]

Let's say we want to use mapbox-gl with r3f. This could in theory be done like so:

map.current = new mapboxgl.Map({
            container: mapContainer.current!,
            center: { lat: 20, lon: 10 },
            zoom: 20,
            attributionControl: false,
            logoPosition: 'top-right',
            pitch: 30,
            style: 'mapbox://styles/mapbox/light-v11',
  })

map.current.on('load', () => {
            const root = createRoot(map.current.getCanvas())

            root.configure({ events, camera: { position: [0, 10, 0] } })

            // createRoot by design is not responsive, you have to take care of resize yourself
            window.addEventListener('resize', () => {
                root.configure({ size: { width: window.innerWidth, height: window.innerHeight } })
            })

            // Trigger resize
            window.dispatchEvent(new Event('resize'))

            root.render(<MyR3FApp />)
        })
   }, [])

However, the issue with this is that a WebGL context could not be created. Reason: Canvas has an existing context of a different type

Even if we get this to work, we then have to deal with a shared context being rendered on demand by mapbox-gl. How should we approach this kind of (shared context) issue?