El filtro de matriz de Javascript parece funcionar, pero no se imprime en la pantalla

Se agregan 4 años a la matriz (2001, 1999, 2000 y 2002)

La matriz está impresa en la pantalla, mostrando los mismos 4 años.

El año máximo se calcula como 2002

El año 2002 se elimina de la matriz.

La matriz está impresa en la pantalla, pero aún muestra 4 años.

Sin embargo, el año máximo se calcula como 2001, lo que indica que 2002 en realidad se eliminó

¿Qué está sucediendo?

const output = document.getElementById('output');
function handleYears() {
 let years = [];
 let addYear = function(newYear) {
 years.push(newYear);
 }
 let deleteYear = function(yearToDelete) {
 years = years.filter(item => item!== yearToDelete)
 }
 let calculateMaxYear = function() {
 return Math.max(...years);
 }
 return {
 years: years,
 addYear: addYear,
 deleteYear: deleteYear,
 calculateMaxYear: calculateMaxYear
 }
}
let newHandleYears = handleYears();
newHandleYears.addYear(2001);
newHandleYears.addYear(1999);
newHandleYears.addYear(2000);
newHandleYears.addYear(2002);
output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
output.innerHTML += `<p>Delete item "${newHandleYears.years[newHandleYears.years.length - 1]}" from "years" array.</p>`;
newHandleYears.deleteYear(2002);
output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;

body {padding: 0.5rem 1rem;}

<div id="output"></div>

Solución del problema

Debe agregar una thispalabra clave porque está reasignando valor y no tiene que hacerlo de forma automática, ya que está llamando a la misma referencia y presionándola.

const output = document.getElementById('output');
function handleYears() {
 let years = [];
 let addYear = function(newYear) {
 years.push(newYear);
 }
 let deleteYear = function(yearToDelete) {
 this.years = years.filter(item => item!== yearToDelete)
 }
 let calculateMaxYear = function() {
 return Math.max(...this.years);
 }
 return {
 years: years,
 addYear: addYear,
 deleteYear: deleteYear,
 calculateMaxYear: calculateMaxYear
 }
}
let newHandleYears = handleYears();
newHandleYears.addYear(2001);
newHandleYears.addYear(1999);
newHandleYears.addYear(2000);
newHandleYears.addYear(2002);
output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
output.innerHTML += `<p>Delete item "${newHandleYears.years[newHandleYears.years.length - 1]}" from "years" array.</p>`;
newHandleYears.deleteYear(2002);
output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;

body {padding: 0.5rem 1rem;}

<div id="output"></div>