I'm creating a multi user VR game environment where user can select their own avatar with movement constraint to nav-mesh, I created a component as such for changing avatar

AFRAME.registerComponent("update-gltf-model", {
  schema: {
    src: {type: 'model'},
    sync: {default: false}
  },
  update() {
    if (this.data.src && this.data.sync) {
      this.el.setAttribute('gltf-model', this.data.src);
    }
  }
});

and based on user selecting the radio button I called a function handle click to set different gltf-model

function handleClick(detail) {
        const id = detail.value;
        document.getElementById('cameraRig').setAttribute('update-gltf-model', 'src', '#' + id);
      }

where details comes from the appropriate radio button selected. My camera is networked and constrained to nav-mesh

<a-entity class="avatar-head"
          id="cameraRig"
          camera="near:0.01;"
          look-controls="pointerLockEnabled: false"
          networked="template:#head-template;attachTemplateToLocal:false;"
          wasd-controls="acceleration:20;"
          simple-navmesh-constraint="navmesh:.navmesh;fall:0.5;height:1.65;"
          position="0 1.65 0"
        ></a-entity>

I have also attached a working code in glitch. Help me out in this regard