// Show the loading indicator
  combobox.loading = true

  fetch(`'https://dummyjson.com/todos'`)
    .then(res => res.json())
    .then(data => {
      // Clear the previous options
      combobox.innerHTML = ''

      // Add the new options
      data?.todos.forEach(item => {
        const option = document.createElement('dap-ds-option-item')
        option.value = item.id.toString()
        option.appendChild(document.createTextNode(item.todo))
        combobox.appendChild(option)
      })

      // Hide the loading indicator
      combobox.loading = false
    })
})

import { useEffect, useRef, useState } from 'react'

const Combobox = () => {
  const [filterResult, setFilterResult] = useState<any[]>([])
  const searchRef = useRef(null)

  useEffect(() => {
    if (searchRef.current) {
      fetch('https://dummyjson.com/todos')
        .then(res => res.json())
        .then(data => {
          setFilterResult(data.todos)
        })
    }
  }, [])

  return (
    <dap-ds-combobox
      label="Todos"
      ref={searchRef}
      sync
      placeholder={'Add some todos for your happy life'}>
      {filterResult?.map(item => (
        <dap-ds-option-item
          key={item.id}
          value={item.id}
          label={item.todo}>
            {item.todo}
        </dap-ds-option-item>
      ))}
    </dap-ds-combobox>
  )
}

export default Combobox