How to add text in created boxed using JS

Question

I create names generator. I created input field, and add button. Enter name, click add -> the name is embeded to ul list. Then I input number of teams and create number of boxes where I will generate random names from list. Here is HTML:

 <div class="form-group">
              <h6 class="text-white mt-5">Number of groups</h6>
              <input type="number" class="num" placeholder="enter num of groups"> 
              <input type="button" id="assign" onclick="assign()" value="Assign">
            </div>



              <div class="form-group">

                <input type="text" class="inputName" placeholder="Enter name">

                <input type="button" id="addName" onclick="addPlayer()" value="Add Player" /><br>

              </div>

            <input type="button" id="clearList" onclick="clear()" value="Clear List" />
            <input type="button" id="generate" onclick="generate()"  value="Generate Teams" />

Here is my JS: no errors in console !

let name = document.querySelector('.inputName');
function addPlayer() {

let li = document.createElement('li');

if(name.value === '') {
  alert('enter name');
  return false;
} else {
  li.innerHTML = name.value;
  name.value = '';
}
let list = document.querySelector('#list');

list.append(li);
}

function assign() {
  let nums = parseInt(document.querySelector('.num').value);
  for (i = 0; i < nums; i++) {
    let box = document.createElement('div');
    box.classList.add('boxList');
    box.innerHTML = `<div>Group ${i + 1}</div>`;
    document.querySelector('.groups').appendChild(box);
  }

}


  function generate(){
  let listPlay = document.querySelectorAll('li').value;

  for (i = 0; i<listPlay; i++) {
    let randName =  Math.floor(Math.random() * listPlay[i]);
    box.innerHTML = randName;
  }

}

THE PROBLEM IS THAT BOXES ARE EMPTY AND INNERHTML DOES NOT WORK