I've been working with ThreeJS for a couple of days now and i've come across a problem that i've seen happen in other online games. When I turn my camera using the PointerLockControls, it makes the camera go to a previous or random rotation. How would I fix this?

Here is the code that I am using for the camera:

import {PointerLockControls} from "three/examples/jsm/controls/PointerLockControls";
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const controls = new PointerLockControls( camera, renderer.domElement );
document.addEventListener('click', () => {
    document.querySelector("#bg").requestPointerLock();
});

It looks like this: https://youtu.be/RjcVDSZSvfg

How do I fix this?