Cursor fuse is not working in aframe

Question

I am trying to display the cursor only for VR mode.The problem is I am unable to change the cursor color and also cursor is not getting fusing.

This is the code I have tried.

Example code:

JS

  AFRAME.registerComponent('bar', {
init: function() {
  let cursor = document.createElement('a-cursor');
  let el = this.el;
  this.el.sceneEl.addEventListener('enter-vr', function() {
   // alert("entered");
    el.appendChild(cursor);



  })
  this.el.sceneEl.addEventListener('exit-vr', function() {
    el.removeChild(cursor);
  })
}})

HTML

<a-entity cursor="fuse: true; fuseTimeout: 500"
        position="0 0 -1"
        geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
        material="color: black; shader: flat"
        visible="true">


<a-camera look-controls="reverseMouseDrag: true" gyro-enabled="false"  user-height="1.6" rotation="0 90 0" position="0 -1 0" mouse-cursor compass bar>