Issue in generating random names in a-frame - three.js

Question

For every character which is connected to a networked a-frame. I want that each character has a random name. But I don't know what issue we are facing, because it's able to generate random names but on one client window, it's showing the same name for each character.
AFRAME.registerComponent("player-info", {
schema: {
name: {
type: "string",
default: user_name,
},
},
init: function () {
this.nametag = this.el.querySelector(".nametag");
// profileName = document.getElementById("userName");
this.ownedByLocalUser = this.el.id === "local-avatar";
if (this.ownedByLocalUser) {
this.nametagInput = document.getElementById("username-overlay");
this.nametagInput.value = this.data.name;
}
// profile.html(this.data.name);
},
listUsers: function () {
console.log(
"DEMO OF RANDOM NAMES IS HERE ::",
"userlist",
[...document.querySelectorAll("[player-info]")].map(
(el) => el.components["player-info"].data.name
)
);
},
update: function () {
if (this.nametag) {
if (this.head)
this.head.setAttribute("material", "color", this.data.color);
this.nametag.setAttribute("value", this.data.name);
console.log(this.data.name);
// var globalName = this.data.name;
}
},
});
};
This I've used for random names generation.
NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
NAF.schemas.getComponents = (template) => {
if (!NAF.schemas.hasTemplate("#head-template")) {
NAF.schemas.add({
template: "#head-template",
components: [
"position",
"rotation",
{
selector: ".head",
component: "material",
property: "color",
},
"player-info",
],
});
}
const components = NAF.schemas.getComponentsOriginal(template);
return components;
};
This I've tried for adding the schema of the networked entity.
<a-entity id="template-rig">
<a-entity
id="avatar"
networked="template:#avatar-template;attachTemplateToLocal:false;"
movement-controls="constrainToNavMesh: true"
spawn-in-circle="radius:3"
position="-15 0.770 25"
>
<a-entity
class="cam"
id="local-avatar"
networked="template:#head-template;attachTemplateToLocal:false;"
camera="active: true"
position="0 2.5 0"
look-controls
>
<a-sphere class="head" visible="true" random-color></a-sphere>
</a-entity>
<a-entity
id="body"
networked="template:#body-template; attachTemplateToLocal:false;"
></a-entity>
</a-entity>
</a-entity>
This is the networked entity I've used.
Please help me with this.