three-globe custom html markers not updating their position when the globe is rotating on y axis

I'm using the three-globe library to make a 3D interactive globe with custom html markers, I used this example https://github.com/vasturiano/three-globe/blob/master/example/html-markers/index.html but when I add a rotation to the globe Globe.rotation.y += speedRotation; inside the animate() function the html markers are still visible even though they are on the back face of the globe but when I drag the globe they fix their position and z-index. How can I fix their position when the globe is rotating ?

Preview: https://codesandbox.io/p/sandbox/jjctmd?file=%2Findex.html%3A98%2C41

you need to add

tbControls.dispatchEvent({ type: 'change' });

or

Globe.setPointOfView(camera);
//cuz this is only one event you added to controls for onchange 

inside animate() cuz:

as i can see in sorce code of TrackballControls.js if you only call controls.update() then onchange Event for controlls will be called only if camera position or zoom (only if camera is Orthographic) was changed:

const _changeEvent = { type: 'change' };
...
const _EPS = 0.000001;
...
class TrackballControls extends Controls {
...
    update() {
        ...
        if ( this.object.isPerspectiveCamera ) {
            ...
            if ( this._lastPosition.distanceToSquared( this.object.position ) > _EPS ) {
                this.dispatchEvent( _changeEvent );
                ...
            }

        } else if ( this.object.isOrthographicCamera ) {
            ...
            if ( this._lastPosition.distanceToSquared( this.object.position ) > _EPS || this._lastZoom !== this.object.zoom ) {
                this.dispatchEvent( _changeEvent );
                ...
            }

        }
    ...
    }
...
}

(and with TrackballControls you move camera, not object)