I'm trying to sort an array on a change event applied to a button but it seems that i never enter in this event listener.

What could be possibly the problem ? Thanks in advance

<div class="sort">
        <button class="sorting" value="popular"><span class="sortby">Popular</span></button>
        <div class="choices">
            <button class="choice" value="popular">Popular</button>
            <button class="choice" value="date">Date</button>
            <button class="choice" value="title">Title</button>
        </div>
    </div>

    const photos = ["abc", "def", "abf", "abdc", "152"]
    const sortBtn = document.querySelector(".sorting")
    const sortBy = document.querySelector(".sortby")
    const choices = document.querySelector(".choices")
    const singleChoice = document.querySelectorAll(".choice")
    singleChoice.forEach((choice, index) => {
        //click on a choice
        choice.addEventListener("click", () => {
            sortBtn.value = choice.value
            sortBy.textContent = choice.value
            console.log("sortbutton value",sortBtn.value)

            //Onchange sort
            sortBtn.addEventListener("change", () => {
                if(sortBtn.value == "date") {
                    photos.sort()
                    console.log(photos)
                }
            }) 
        })
    })