JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div role="none">
    <button type="button" aria-expanded="false" aria-haspopup="listbox" data-value="New" aria-label="Status, New" aria-controls="dropdown-element" id="btn"><span>New</span></button>
  </div>

  <div id="dropdown-element" data-dropdown-element="" role="listbox" class = "hidden">
    <div data-item-id="combobox-button-0" data-value="" role="option" id="combobox-button-0" aria-checked="false" aria-selected="false">
      None
    </div>
    <div data-item-id="combobox-button-1" data-value="Option 1" role="option" id="combobox-button-1" aria-checked="false" aria-selected="false">
      Option 1
    </div>
    <div data-item-id="combobox-button-2" data-value="Option 2" role="option" id="combobox-button-2" aria-checked="false" aria-selected="false">
      Options 2
    </div>
  </div>
</div>

CSS

.hidden {
  display: none
}

JavaScript

const btn = document.getElementById("btn");
const dropdownElement = document.getElementById("dropdown-element");
btn.addEventListener("click", () => {
	if (dropdownElement.classList.contains("hidden")) {
		dropdownElement.classList.remove("hidden");  
  } else {
		dropdownElement.classList.add("hidden");
  }
});

const items = dropdownElement.children;
for (const item of items) {
console.log(item);
	item.addEventListener("mouseover", (e) => {
  	const id = e.target.dataset.itemId;
    console.log(id);
    btn.setAttribute("aria-activedescendant", id);
    for (const item of items) {
    	item.setAttribute("aria-selected", false);
    }
    e.target.setAttribute("aria-selected", true);
  });
 
}