Can't resolve the w3c error "Element div not allowed as child of element ul in this context." with the astro framework

Question

I have an w3c error in my website which is using astro framework. The error is "Element div not allowed as child of element ul in this context." But I am still not much familiar with astro. Please help me to solve this. Relevant components are below.

SelectorsDropdown.astro component.

---
import { parseHTML } from "linkedom";

const { selectorType, ariaLabel } = Astro.props;

const defaultSlotHTML = await Astro.slots.render("default");

const { document } = parseHTML(defaultSlotHTML),
 listItems = [...document.querySelectorAll("li")];

const firstListItemHTML = listItems[0].outerHTML,
  dropdownOpenAreaInnerHTML = listItems
    .slice(1)
    .map((li) => li.outerHTML)
    .join("");

const dropdownInnerHTML = `${firstListItemHTML}<div>${dropdownOpenAreaInnerHTML}</div>`;
---

<style lang="scss" is:global>
  .selectors-dropdown[data-selector-type="lang"]
    > li
    > span
    > span
    > span:not(:first-child) {
    display: none;
  }

  .selectors-dropdown {
    > li {
      @apply font-medium border-2 border-primary rounded-full;

      > span {
        @apply py-2.5 px-[15px];
      }
    }

    > div {
      @apply absolute mt-[5px] w-full overflow-y-auto
        rounded-t-[25px] rounded-b-[25px];

      > li {
         display: none;

        > span {
          @apply hover:font-semibold hover:bg-primary-light;

           border-radius: inherit;

          > svg:last-of-type {
            display: none;
          }
        }
      }
    }

    &.dropdown-open {
      z-index: 1;

      > div {
        @apply border-2 border-primary;

        > li {
          display: block;
        }
      }
    }
  }
</style>

<ul
  role="listbox"
  aria-label={ariaLabel}
  set:html={dropdownInnerHTML}
  data-selector-type={selectorType}
  class:list={[
    "selectors-dropdown relative",
    "text-primary text-sm lg:text-base select-none drop-shadow-lg",
  ]}
/>

<script>
  const dropdowns = [...document.querySelectorAll(".selectors-dropdown")];

  const updateDropdownOpenAreaHeight = () => {
    dropdowns.forEach((dropdown) => {
      if (dropdown.classList.contains("dropdown-open")) {
        const dropdownOpenArea = [...dropdown.children][1] as HTMLDivElement,
          dropdownOpenAreaMaxHeight =
            window.innerHeight - dropdownOpenArea.getBoundingClientRect().y - 8;

        dropdownOpenArea.style.maxHeight = dropdownOpenAreaMaxHeight + "px";
      }
    });
  };

  // toggle language selectors dropdown
  document.addEventListener("click", (event) => {
    const target = event.target as HTMLElement;

    dropdowns.forEach((dropdown) => {
      if (dropdown.contains(target)) {
        dropdown.classList.toggle("dropdown-open");

        updateDropdownOpenAreaHeight();
      } else {
        dropdown.classList.remove("dropdown-open");
      }
    });
  });

  dropdowns.forEach((dropdown) => {
    dropdown.addEventListener("keyup", (event) => {
      const { key } = event as KeyboardEvent;

      // alias enter keypress to click event
     if (key === "Enter") {
        (event.target as HTMLElement).click();
      }
    });
  });

  window.addEventListener("resize", updateDropdownOpenAreaHeight);
</script>

SelectorsDropdownItem.astro component.

---
const { className, ...props } = Astro.props;
---

<li
  role="option"
  tabindex="0"
  {...props}
  class:list={[
    className,
    "selectors-dropdown-item",
    "block bg-secondary text-black-light cursor-pointer",
  ]}
>
  <span class="w-full p-4 flex items-center justify-between">
    <slot />

    <svg class="w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.6 6.7">
      <path
              d="M.3.3A.6.6,0,0,1,.9,0a.9.9,0,0,1,.6.3L5.8,4.6,10.2.3a.6.6,0,0,1,.6-.3l.6.3a.8.8,0,0,1,.2.6.7.7,0,0,1-.2.6l-5,4.9a.6.6,0,0,1-.6.3.9.9,0,0,1-.6-.3L.3,1.5A.9.9,0,0,1,0,.9.6.6,0,0,1,.3.3Z"
    fill="#2B4B50"></path>
    </svg>
  </span>
</li>

I know the problem is with the div in here.

"const dropdownInnerHTML = ${firstListItemHTML}<div>${dropdownOpenAreaInnerHTML}</div>;".

I have no idea how to remove this error.

Any advice would be really appreciated.

I am expecting a clear solution for this.