Three.js DeviceOrientationControl makes scene disappear - three.js

Question

I have a glb model which loads successfully and reacts to mouse movements. However when I add DeviceOrientationControl.js which is intended for mobile devices, the scene disappears. No errors visible in the console. Funny enough, when I change
controls = new DeviceOrientationControls( camera, renderer.domElement );
to
controls = new DeviceOrientationControls( group, renderer.domElement );
it works, but has strangely displaces the model around the axis, which I am not able to readjust manually. Can someone help me find a solution? Why doesn't it work with camera but with group (model directly)?
Also when I add
camera.lookAt(scene.position);
and disable DeviceOrientationControls, the model works however the desired controls are not, which is my main issue.
Here is my code:
import * as THREE from '../node_modules/three/build/three.module.js';
import {OrbitControls} from '../node_modules/three/examples/jsm/controls/OrbitControls.js';
import {DeviceOrientationControls} from '../node_modules/three/examples/jsm/controls/DeviceOrientationControls.js';
import {GLTFLoader} from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from '../node_modules/three/examples/jsm/loaders/DRACOLoader.js';
import Stats from '../node_modules/three/examples/jsm/libs/stats.module.js';
var camera, scene, renderer, group, stats, controls, windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
mouseX = 0,
mouseY = 0;
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var width = window.innerWidth;
var height = window.innerHeight;
window.onload = function () {
init();
animate();
$(".loadmain").fadeOut(500);
}
var startButton = document.getElementById( 'startButton' );
startButton.addEventListener( 'click', function () {
$("#overlay").fadeOut(700, function(){
$(this).remove();
});
document.body.className += "loaded";
document.querySelector("canvas").className += " load";
}, false );
const gltfLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/libs/draco/');
dracoLoader.setDecoderConfig({ type: 'js' });
gltfLoader.setDRACOLoader(dracoLoader);
function init() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
controls = new DeviceOrientationControls( camera, renderer.domElement );
camera.position.set(0, 0, 7);
camera.zoom = 1;
camera.updateProjectionMatrix();
scene = new THREE.Scene();
scene.updateMatrixWorld();
var directionalLight = new THREE.DirectionalLight(0xffffff, 3);
directionalLight.color.setHSL(0.1, 1, 0.95);
directionalLight.position.set(0, 1, 1);
directionalLight.position.multiplyScalar(10);
scene.add(directionalLight);
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
var spotLight1 = new THREE.DirectionalLight( 0xff4000 );
spotLight1.position.set( -15, 3, -4 );
spotLight1.target.position.set( 0, 1, 0 );
spotLight1.castShadow = true;
scene.add( spotLight1 );
var spotLight2 = new THREE.DirectionalLight( 0xff0aea );
spotLight2.position.set( 15, 3, -4 );
spotLight2.target.position.set( 0, 1, 0 );
spotLight2.intensity = 1.2;
spotLight2.castShadow = true;
scene.add( spotLight2 );
group = new THREE.Group();
group.position.x = 0;
scene.add( group );
scene.add( camera );
gltfLoader.load('../public/res/3D/model.glb', (gltf) => {
const root = gltf.scene;
root.rotateY(-89.55);
root.position.x = 0;
root.position.y = -0.7;
root.castShadow = true;
group.add(root);
});
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: document.querySelector('canvas'), alpha: true, });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onDocumentMouseMove(event) {
event.preventDefault();
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = - (event.clientY / window.innerHeight) * 2 + 1;
}
function animate() {
window.requestAnimationFrame( animate );
if (group) {
group.rotation.y = mouseX * .5;
group.rotation.x = mouseY * -.5;
}
controls.update();
render();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function render() {
//camera.lookAt(scene.position);
renderer.render( scene, camera );
}