javascript - The camera doesn't move with the avatar template and cursor in Networked A-frame scene - Stack Overflow

I am implementing a network scene with avatar in a react project using the Networked A-frame framework. The camera doesn't move and is in the center of the scene, but the avatar and cursor move together. And the avatars can't see each other even though they are in the same room. What could be the problem?

The hierarchy is realized as follows: The root container rig serves as the main positioning entity, within which is a player network entity containing camera and visual avatar elements. The camera entity includes controls for movement and inspection, and the fact that it is a child of the player. The visual representation (avatar template: box and text) exists at the same level as the camera, inside the player entity, which should allow them to move together as a unit, but they don't.

Here is avatar temlate creation (template-setup.js):

export const createAvatarTemplate = () => {
  if (document.getElementById('avatar-template')) return;

  const templateHTML = `
    <template id="avatar-template">
      <a-entity class="avatar">
        <a-box 
          class="head clickable"
          color="#5985ff"
          depth="0.2"
          height="0.2"
          width="0.2"
          position="0 1.6 0"
          material="opacity: 0.8"
        ></a-box>
        <a-text
          class="player-name"
          position="0 1.9 0"
          align="center"
          side="double"
          width="1"
          color="#FFFFFF"
          scale="0.5 0.5 0.5"
        ></a-text>
      </a-entity>
    </template>
  `;

  const template = document.createElement('div');
  template.innerHTML = templateHTML;
  document.body.insertBefore(template.firstElementChild, document.body.firstChild);
}; 

createAvatarTemplate();  

Code of networked scene(NetworkedScene.jsx):

const Cursor = memo(() => (
  <a-cursor
    position="0 0 -1"
    geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
    material="color: white; shader: flat"
    cursor="rayOrigin: mouse"
    raycaster="objects: .clickable"
  ></a-cursor>
));

Cursor.displayName = 'Cursor';

const Camera = memo(() => (
  <a-entity
    id="camera"
    position="0 1.6 0"
    camera
    look-controls="pointerLockEnabled: false"
    wasd-controls="acceleration: 200; fly: true"
  >
    <Cursor />
  </a-entity>
));

Camera.displayName = 'Camera';

const Player = memo(() => (
  <a-entity
    id="player"
    position="0 0 0"
    networked="template: #avatar-template; attachTemplateToLocal: true"
  >
    <a-box
      class="head clickable"
      color="#5985ff"
      depth="0.2"
      height="0.2"
      width="0.2"
      position="0 1.6 0"
    />
    <a-text
      class="player-name"
      value="Player"
      position="0 1.9 0"
      align="center"
      side="double"
      width="1"
      color="#FFFFFF"
      scale="0.5 0.5 0.5"
    />
  </a-entity>
));

Player.displayName = 'Player';

const VRScene = memo(({ sceneRef, username, roomName }) => (
  <a-scene
    ref={sceneRef}
    embedded
    networked-scene={`
      room: ${roomName}; 
      adapter: socketio; 
      audio: false; 
      debug: true; 
      connectOnLoad: true; 
      serverURL: ws://localhost:8000
    `}
    renderer="antialias: true"
    background="color: #1a1a1a"
  >
    <a-entity 
      id="rig" 
      position="0 0 0"
      rotation-reader
    >
      <Camera />
      <a-entity
        id="player"
        networked="template: #avatar-template; attachTemplateToLocal: true"
      >
        <a-box
          class="head clickable"
          color="#5985ff"
          depth="0.2"
          height="0.2"
          width="0.2"
          position="0 1.6 0"
        />
        <a-text
          class="player-name"
          value={username}
          position="0 1.9 0"
          align="center"
          side="double"
          width="1"
          color="#FFFFFF"
          scale="0.5 0.5 0.5"
        />
      </a-entity>
    </a-entity>

    <a-plane position="0 0 0" rotation="-90 0 0" width="30" height="30" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
    <a-entity light="type: ambient; color: #BBB"></a-entity>
    <a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 1 1"></a-entity>
  </a-scene>
));


VRScene.displayName = 'VRScene';

And I need to define the avatar template that way, since there is a conflict between React and NAF.

As soon as I try to link them together, the avatar pattern disappears or one thing moves:

1. Avatar and cursor, and the camera stands still.
2. The camera and cursor, and the avatar disappears.