Trying to change the background color of a grid element on click event

I cant seem to figure out the syntax to get an element in my grid to change colors on a click event. Ive tried a few different iterations of this, and cant seem to figure out what im doing wrong. Pretty new to javscript so go easy on me if its a very obvious answer.

JS

    const gridContainer = document.getElementById('container');

    function makeGrid(rows, cols) {
      gridContainer.style.setProperty('--grid-rows', rows);
      gridContainer.style.setProperty('--grid-cols', cols);

      for (i = 0; i < rows * cols; i++) {
        let cell = document.createElement('div');
        gridContainer.appendChild(cell).className = 'grid-item';
      }
    }
    makeGrid(16, 16);

    const gridElement = document.getElementById('grid-item');
    gridElement.addEventListener('click', () => {
        gridElement.target.style.backgroundColor = 'white';
    })

css

:root {
    --grid-cols: 1;
    --grid-rows: 1;
}

#container{
    display: grid;
    grid-gap: 0em;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    background-color: black;
}

.grid-item{
    padding: 1em;
    border: 1px solid #131313;
    text-align: center;
}

.grid-item:hover{
    background-color: #ddd;
}

I tried to make a separate function to target the grid element and on clicking the element the color would change but it doesnt seem to click.