Почему e.target.style.backgroundColor не обновляется, если цвет был определен вне функции?

const grid = document.querySelector(".grid");
const clear = document.querySelector("#clear");
clear.addEventListener("click", reset);
function createDivs(){
    for(i = 1; i < 16 * 16 + 1; i++){
        let createdDivs = document.createElement("div")
        grid.appendChild(createdDivs)
        createdDivs.setAttribute("class", "grid-element" )
    }
    grid.style.gridTemplateColumns = `repeat(${16}, 1fr)`
    grid.style.gridTemplateRows = `repeat(${16}, 1fr)`
}
createDivs();
function reset(){
    let divs = document.querySelectorAll(".grid-element")
    divs.forEach(function(div){
        div.parentNode.removeChild(div);
    });
    createDivs();
}

const li = document.querySelectorAll("ul li")
li.forEach(function(e){
    e.addEventListener("click", fetchClassName)  
})
let className = ["black"]
let oldClassName = ["black"]
let currentColor = "black"
function fetchClassName(e){
    className.unshift(e.srcElement.className);
    oldClassName = className.pop();
    setColor();
}
function setColor(){
    let divs = document.querySelectorAll(".grid-element");
    switch(className[0]){
        case "rainbow":
            divs.forEach(function(div){
                div.removeEventListener("mouseover", updateColor);
                div.addEventListener("mouseover", skittles);
            })
            break;
        case "blue":
            currentColor = "rbga(0, 0, 255, 1)"
            for (y = 0; y < divs.length; y++){
                let div = divs[y];
                div.removeEventListener("mouseover", skittles);
                div.addEventListener("mouseover", updateColor);
            }
            break;
    }
}
function updateColor(e){
        e.target.style.backgroundColor = currentColor //className[0] works but not what I want
        console.info(currentColor)
}
function skittles(e){
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        let rgb = `rgba(${r}, ${g}, ${b}, 0.5)`
        e.target.style.backgroundColor = rgb;
}

.grid {
  display: grid;
  height: 550px;
  width: 550px;
}
.grid-element {
  grid-area: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
ul li:hover {
  cursor: pointer;
}

<div class = "container">
    <div class = "grid"></div>
</div>
<div>
    <button type = "button" id = "clear">Clear Canvas</button>
        <ul>
            <li class = "blue">blue</li>
            <li class = "rainbow">rainbow</li>
        </ul>
 </div>