I get undefined when I am using js to create a-entity with aframe component

I am trying to add some objects through a-entity based on a given location. the problem is setAttribute is not working because when I call getAttribute, it return “undefined”. even geometry and material.. by the way I hardcoded an entity with html tag and it works correctly.
I thought I have to wait for a-scene to load completely but its not working either.
can anyone let me know what is the problem? I think I am missing something but I do not know what it is.

<script>

console.log("0");
AFRAME.registerComponent('gps-coins', {
  init: function () {
console.log("started1");

    for (var i = 0; i < 5; i++) {

      var coinEntity = document.createElement('a-entity');

      coinEntity.setAttribute('geometry', 'primitive: cylinder; radius: 5; height: 1'); // Adjust size
      coinEntity.setAttribute('material', 'color:green'); // Coin color
      coinEntity.setAttribute('rotation', '0 90 90'); 
      coinEntity.setAttribute('position', '5 5 5'); 
    console.log(coinEntity.getAttribute('geometry'));   
    console.log(coinEntity.getAttribute('material'));   

      // Append the coin to the scene
      this.el.appendChild(coinEntity);


    }
  }
});

console.log("very end");
</script>

I want to create 10 coin in the a-scene and also set some attribute to them but when I call getAttribute, I get undefined.