Camera get messed up on resize when directional light is in scene and shadowmap is enabled in mapbox

I have set up a three scene in mapbox with shadows. The shadows works fine:

The problem arises when I resize mapbox:

This is how I set up my scene in mapbox:

var modelTransform = getModelTransform(location);

    var customLayer = {
      id: "3d-model",
      type: "custom",
      renderingMode: "3d",
      onAdd: function (threeMap, gl) {
        camera = new THREE.Camera();

        map = threeMap;

        // use the Mapbox GL JS map canvas for three.js
        this.renderer = new THREE.WebGLRenderer({
          canvas: map.getCanvas(),
          context: gl,
          antialias: true,
        });

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

      },
      render: function (gl, matrix) {
        var rotationX = new THREE.Matrix4().makeRotationAxis(
          new THREE.Vector3(1, 0, 0),
          modelTransform.rotateX
        );
        var rotationY = new THREE.Matrix4().makeRotationAxis(
          new THREE.Vector3(0, 1, 0),
          modelTransform.rotateY
        );
        var rotationZ = new THREE.Matrix4().makeRotationAxis(
          new THREE.Vector3(0, 0, 1),
          modelTransform.rotateZ
        );

        var m = new THREE.Matrix4().fromArray(matrix);
        var l = new THREE.Matrix4()
          .makeTranslation(
            modelTransform.translateX,
            modelTransform.translateY,
            modelTransform.translateZ
          )
          .scale(
            new THREE.Vector3(
              modelTransform.scale,
              -modelTransform.scale,
              modelTransform.scale
            )
          )
          .multiply(rotationX)
          .multiply(rotationY)
          .multiply(rotationZ);

        camera.projectionMatrix = m.multiply(l);
        this.renderer.state.reset();
        this.renderer.render(scene, camera);
        scene.add(createBounds(params.location, params.bounds, THREE))
        //map.triggerRepaint();
      }
    };

    map.on("style.load", () => {
      map.addLayer(customLayer, "waterway-label");
    });

The onAdd is called once when the page is loaded and render when something changes in mapbox. If I place the code for initializing the renderer in render it works but it’s very laggy.

This issue only occurs if I have both the shadowmap enabled and have a visible directional light in the scene. Any idea what might cause this?

I found a solution. It seems when I set the renderer it is configured to the canvas current height and with so what I did was to check every render call if the height or width changes and if it does I dispose of the old renderer and create a new one.