Mi juego de colores

Quiero obtener el valor del estado establecido, pero componenteDidMount solo me da el valor anterior del estado sin actualizarlo

¿Alguien puede decirme qué sistema de estado usar para resolver este problema? Gracias.

 state = { color: '', main_color: '', } componentDidMount() { let box_count = 3; let byee = document.querySelectorAll(".boxes"); let main_color = this.state.main_color; for (let i = 0; i < box_count; i++) { byee[i].addEventListener("click", function () { if (byee[i].style.backgroundColor === main_color) { win(); } else { loose(); console.log(byee[i].style.backgroundColor); console.log(main_color); } }) } function win() { console.log("winner"); } function loose() { console.log("loose"); } }