enter image description heredrag.php

I have array shuffled with shuffled words and when I try to set textContent of box to word it show this

    <script>
      var firstContainer = document.getElementById('pickzone');
    var sentense =<?php echo "'$array'" ?>; //getting string of sentense
    var arrOfWords = sentense.split(" ") // spliting it into array of strings(words)
    var dropZones = document.getElementsByClassName('zone');
    var shuffled = arrOfWords.sort(() => Math.random() - 0.5)// shuffling array of words in random order
    
    for (let i = 0; i < arrOfWords.length; i++) {
        let box = document.createElement('span');
        arrOfWords[i] = box;
        box.setAttribute('class', 'box');
        box.setAttribute('draggable', 'true')
        box.textContent = shuffled[i] // this is the problematic part I guess
        box.addEventListener('dragstart', (event) => { 
            dragBox = event.target;
        })
    
        firstContainer.appendChild(box);
    }
</script>