My Color Game

I want to get the value of set state but componentDidMount just gives me the previous value of state without updating it

Can anyone tell me which state system to use to resolve this problem Thanxs

    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");
        }
    }