aframe – A-Frame super hands: not working on entities that are appended to scene

I’m using A-frame and Super Hands.

I have a container entity, and i’m appending 9 a-boxes to it on init (programmatically), using component. If I’m setting an ‘draggable’ and ‘grabbable’ attributes to these a-boxes (even after they fire the ‘loaded’ event), they won’t be draggable, it’s not working.

However, if I’m writing these entities manually as HTML, it works.
Seems like I’m missing something that is related to lifecycle hooks maybe?

Any help will be highly appreciated.

Codepen:
https://codepen.io/amichai-dani/pen/GRNWQLp

<html>

<head>
    <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
    <script src="https://unpkg.com/super-hands@^3.0.1/dist/super-hands.min.js"></script>

    <script>
        AFRAME.registerComponent('add-boxes', {
            init: function () {
                const container = this.el;
                let count = 1;
                let positionX = -0.5;
                let positionY = 2;

                while (count <= 9) {

                    let elBox = document.createElement('a-box');
                    elBox.setAttribute('position', positionX + ' ' + positionY + ' -0.8');
                    elBox.setAttribute('color', 'red');
                    elBox.setAttribute('scale', '0.3 0.3 0.05');
                    elBox.setAttribute('box-number', count);
                    elBox.setAttribute('after-box-loaded', '');

                    container.appendChild(elBox);

                    positionX += 0.5;

                    if (count % 3 === 0) {
                        positionX = -0.5;
                        positionY -= 0.4;
                    }
                    count++;
                }
            }
        })

        AFRAME.registerComponent('after-box-loaded', {
            init: function () {
                this.el.setAttribute('grabbable', '')
                this.el.setAttribute('stretchable', '')
                this.el.setAttribute('draggable', '')
                this.el.setAttribute('dropppable', '')
            }
        })

    </script>
</head>

<body>
    <a-scene>
        <a-entity>
            <a-camera></a-camera>
            <a-entity sphere-collider="objects: a-box" super-hands hand-controls="hand: left"></a-entity>
            <a-entity sphere-collider="objects: a-box" super-hands hand-controls="hand: right"></a-entity>
        </a-entity>

        <a-entity add-boxes></a-entity>
    </a-scene>
</body>

</html>