Valid children in list elements

How to fix this issue?

Place only <li>, <script>, or <template> elements as direct children of <ul> or <ol>:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<ul>
  <li>First item</li>
  <script>/* ... */</script>
  <template>...</template>
</ul>

If you need to add extra markup around list items, move that markup inside the <li> element:

<ul>
  <div>
    <li>First item</li>
  </div>
</ul>

<ul>
  <li>
    <div>First item</div>
  </li>
</ul>

Why is this important?

Screen readers announce the number of items in a list to help users navigate. Invalid child elements break the list structure, which causes screen readers to report incorrect information or skip items entirely.