camera feed not showing up in XRViewer

[Fehler40]

hey! after requesting a session, the AR session starts as expected. unfortunately there is no camera feed on the display. This is my code:

`import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import WebXRPolyfill from 'webxr-polyfill';
import * as THREE from 'three';

class WebXR extends React.Component {
    constructor(props) {
        super(props);
        // this.onXRFrame = this.onXRFrame.bind(this);
        this.onEnterAR = this.onEnterAR.bind(this);

        this.init();
    }

init = async () => {

    if (navigator.xr && window.XRSession.prototype.requestHitTest) {
        try {
            this.device = await navigator.xr.requestDevice();
            this.message = 'device supported';

        } catch (e) {

            this.message = 'device not supported';

            return;
        }
    } else {
        // If `navigator.xr` or `XRSession.prototype.requestHitTest`
        // does not exist, we must display a message indicating there
        // are no valid devices.
        this.message = 'device not supported';

        return;
    }

    document.getElementById('enter-ar').addEventListener( 'click', this.onEnterAR);

}
onEnterAR = async () => {

    let outputCanvas = document.createElement('canvas');

    let ctx = outputCanvas.getContext('xrpresent');
    try {

        const session = await this.device.requestSession({

            outputContext: ctx,
            environmentIntegration: true
        });            

        document.body.appendChild(outputCanvas);
        this.onSessionStarted(session)

    } catch (e) {

        this.message = 'device not supported';

    }

}

onSessionStarted = async (session) => {
     this.message = 'session started';
    this.session = session;

    this.renderer = new THREE.WebGLRenderer({
        alpha: true,
        preserveDrawingBuffer: true,
      });
    this.renderer.autoClear = false;

    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    this.gl = this.renderer.getContext();

    await this.gl.setCompatibleXRDevice(this.session.device);

    this.session.baseLayer = new window.XRWebGLLayer(this.session, this.gl);

    const framebuffer = this.session.baseLayer.framebuffer;
    this.renderer.setFramebuffer(framebuffer);

    this.scene = new THREE.Scene() // The scene will be rotated and oriented around the camera using the head pose

    this.camera = new THREE.PerspectiveCamera(70, 1024, 1024, 0.1, 1000) // These values will be overwritten by the projection matrix from ARKit or ARCore
    this.scene.add(this.camera)

    this.frameOfRef = await this.session.requestFrameOfReference('eye-level');
    this.session.requestAnimationFrame(this.onXRFrame);

    }
    render() {

        return (
            <div id="wrapper" style={styles.root}>WebXR {this.message}
                <button id="enter-ar" >Enter AR</button>
                <div> Output: {this.output}</div>
            </div>

        );
    }
}

export default withStyles(styles)(WebXR);

I am not sure, whats wrong. I know this is more a stackoverflow question, but I didn't get any response. Thanks a lot!