Ripple rings are in backside of map not infront

Question

I'm trying to work with Globe but Ripple rings always going on the backside of the map, not in front of it

I'm using https://github.com/vasturiano/globe.gl/blob/master/example/random-rings/index.html as source and already I tried BackSide for ripple rings

Also is there anyway to disable rotate with mouse or disable mouseclick or drag

    const N = 2;
    const gData = [...Array(N).keys()].map(() => ({
        lat: 35.6892,
        lng: 51.3890,
        maxR: Math.random() * 20 + 10,
        propagationSpeed: 2,
        repeatPeriod:1000
    }));

    const colorInterpolator = t => `rgba(255,100,50,${Math.sqrt(1-t)})`;
    
    const world = Globe()
        (document.getElementById('globeViz'))
        .ringsData(gData)
        .ringColor(() => colorInterpolator)
        .ringMaxRadius('maxR')
        .ringPropagationSpeed('propagationSpeed')
        .ringRepeatPeriod('repeatPeriod')
        // .backgroundColor('rgba(0,0,0,0)')
        .showGlobe(false)
        .showAtmosphere(false);

    fetch('https://unpkg.com/world-atlas/land-110m.json').then(res => res.json())
    .then(landTopo => {
        world
            .polygonsData(topojson.feature(landTopo, landTopo.objects.land).features)
            .polygonCapMaterial(new THREE.MeshLambertMaterial({
                color: '#282828',
                side: THREE.DoubleSide
            }))
            .polygonSideColor(() => 'rgba(0,0,0,0)');
    });

    // Add auto-rotation
    world.controls().autoRotate = true;
    world.controls().autoRotateSpeed = 0.9;

Preview : https://i.ibb.co/JyjwPL7/s.png