So, what I am trying to achieve is selecting all className that contain "list"

Then whenever one is clicked, it becomes "list active", when clicked next, the "active" is removed from the current list and goes to the next one. something like this first I want to select all the list classes

const list = document.querySelectorAll(".list");

then

function activeList() {
    list.forEach((element) => element.classList.remove("active"));
    this.classList.add("active");
   }

then I want to add a listener to all "list classes"

list.forEach((element) => element.addEventListener("click", activeList));

The problem is this approach does not work on react. any suggestion?