O código a seguir é capaz de realizar a seguinte tarefa : ao clicar no botão "Criar Quadrado" um quadrado vermelho é renderizado na tela em cada clique. Desejo que ao passar o mouse por cima destes quadrados gerados estes troquem de cor. Segue o código : 
<html>
  <head>
    <meta charset="UFT-8" />
    <title></title>
  </head>

  <body>
    <div id="container"></div>
    <button type="button" onclick="criarQuadrado()">Criar quadrado</button>
    <script>
      function criarQuadrado() {
        var boxElement = document.createElement("div");
        boxElement.style.width = 300;
        boxElement.style.height = 300;
        boxElement.style.display = "inline-block";
        boxElement.style.backgroundColor = "#f00";

        var container = document.getElementById("container");
        container.appendChild(boxElement);
      }
</script>
  </body>
</html>

A função quer será responsável por gerar as mudanças de cores é a seguinte : 

function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
      var newColor = getRandomColor(); 

Como posso resolver tal problema?