diff --git a/packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx b/packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx
index baaccaedfe..4521bf3b2c 100644
--- a/packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx
+++ b/packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx
@@ -119,70 +119,73 @@ export default function Home() {
                 filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
               )}
             >
-              {({ option }: { option: Option }) => {
-                if (!option || option.empty) {
+              {
+                // @ts-expect-error TODO: Properly handle this
+                ({ option }: { option: Option }) => {
+                  if (!option || option.empty) {
+                    return (
+                      <Combobox.Option
+                        // TODO: `disabled` being required is a bug
+                        disabled
+                        // Note: Do NOT use `null` for the `value`
+                        value={option ?? emptyOption.current}
+                        className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
+                      >
+                        <div className="relative grid h-full grid-cols-1 grid-rows-1">
+                          <div className="absolute inset-0">
+                            <svg
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              strokeWidth={0.5}
+                              stroke="currentColor"
+                              className="-translate-y-1/4 text-gray-500/5"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
+                              />
+                            </svg>
+                          </div>
+                          <div className="z-20 col-span-full col-start-1 row-span-full row-start-1 flex flex-col items-center justify-center p-8">
+                            <h3 className="mx-2 mb-4 text-xl font-semibold text-gray-400">
+                              No people found
+                            </h3>
+                            <button
+                              id="add_person"
+                              type="button"
+                              className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                              onClick={() => {
+                                let person = { name: query, disabled: false }
+                                setList((list) => [...list, person])
+                                setSelectedPerson(person)
+                              }}
+                            >
+                              Add "{query}"
+                            </button>
+                          </div>
+                        </div>
+                      </Combobox.Option>
+                    )
+                  }
+
                   return (
                     <Combobox.Option
                       // TODO: `disabled` being required is a bug
-                      disabled
-                      // Note: Do NOT use `null` for the `value`
-                      value={option ?? emptyOption.current}
-                      className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
+                      disabled={option.disabled}
+                      value={option}
+                      className={({ active }) => {
+                        return classNames(
+                          'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
+                          active ? 'bg-indigo-600 text-white' : 'text-gray-900'
+                        )
+                      }}
                     >
-                      <div className="relative grid h-full grid-cols-1 grid-rows-1">
-                        <div className="absolute inset-0">
-                          <svg
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={0.5}
-                            stroke="currentColor"
-                            className="-translate-y-1/4 text-gray-500/5"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
-                            />
-                          </svg>
-                        </div>
-                        <div className="z-20 col-span-full col-start-1 row-span-full row-start-1 flex flex-col items-center justify-center p-8">
-                          <h3 className="mx-2 mb-4 text-xl font-semibold text-gray-400">
-                            No people found
-                          </h3>
-                          <button
-                            id="add_person"
-                            type="button"
-                            className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-                            onClick={() => {
-                              let person = { name: query, disabled: false }
-                              setList((list) => [...list, person])
-                              setSelectedPerson(person)
-                            }}
-                          >
-                            Add "{query}"
-                          </button>
-                        </div>
-                      </div>
+                      <span className="block truncate">{option.name}</span>
                     </Combobox.Option>
                   )
                 }
-
-                return (
-                  <Combobox.Option
-                    // TODO: `disabled` being required is a bug
-                    disabled={option.disabled}
-                    value={option}
-                    className={({ active }) => {
-                      return classNames(
-                        'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
-                        active ? 'bg-indigo-600 text-white' : 'text-gray-900'
-                      )
-                    }}
-                  >
-                    <span className="block truncate">{option.name}</span>
-                  </Combobox.Option>
-                )
-              }}
+              }
             </Combobox.Options>
           </div>
         </div>
diff --git a/packages/playground-react/pages/combobox/combobox-virtualized.tsx b/packages/playground-react/pages/combobox/combobox-virtualized.tsx
index 3d2b7bd6ce..1d476015d9 100644
--- a/packages/playground-react/pages/combobox/combobox-virtualized.tsx
+++ b/packages/playground-react/pages/combobox/combobox-virtualized.tsx
@@ -107,55 +107,48 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
               <div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
                 {virtual ? (
                   <Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
-                    {
-                      // @ts-expect-error TODO
-                      ({ option, idx }) => {
-                        return (
-                          <Combobox.Option
-                            value={option}
-                            className={({ active }) => {
-                              return classNames(
-                                'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
-                                active ? 'bg-indigo-600 text-white' : 'text-gray-900'
-                              )
-                            }}
-                          >
-                            {({ active, selected }) => (
-                              <>
+                    {({ option }) => {
+                      return (
+                        <Combobox.Option
+                          value={option}
+                          className={({ active }) => {
+                            return classNames(
+                              'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
+                              active ? 'bg-indigo-600 text-white' : 'text-gray-900'
+                            )
+                          }}
+                        >
+                          {({ active, selected }) => (
+                            <>
+                              <span
+                                className={classNames(
+                                  'block truncate',
+                                  selected ? 'font-semibold' : 'font-normal'
+                                )}
+                              >
+                                {option as any}
+                              </span>
+                              {selected && (
                                 <span
                                   className={classNames(
-                                    'block truncate',
-                                    selected ? 'font-semibold' : 'font-normal'
+                                    'absolute inset-y-0 right-0 flex items-center pr-4',
+                                    active ? 'text-white' : 'text-indigo-600'
                                   )}
                                 >
-                                  {option}
+                                  <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                    <path
+                                      fillRule="evenodd"
+                                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                      clipRule="evenodd"
+                                    />
+                                  </svg>
                                 </span>
-                                {selected && (
-                                  <span
-                                    className={classNames(
-                                      'absolute inset-y-0 right-0 flex items-center pr-4',
-                                      active ? 'text-white' : 'text-indigo-600'
-                                    )}
-                                  >
-                                    <svg
-                                      className="h-5 w-5"
-                                      viewBox="0 0 20 20"
-                                      fill="currentColor"
-                                    >
-                                      <path
-                                        fillRule="evenodd"
-                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                                        clipRule="evenodd"
-                                      />
-                                    </svg>
-                                  </span>
-                                )}
-                              </>
-                            )}
-                          </Combobox.Option>
-                        )
-                      }
-                    }
+                              )}
+                            </>
+                          )}
+                        </Combobox.Option>
+                      )
+                    }}
                   </Combobox.Options>
                 ) : (
                   <Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
diff --git a/packages/playground-vue/src/main.ts b/packages/playground-vue/src/main.ts
index 2202f677b5..ca791b439b 100644
--- a/packages/playground-vue/src/main.ts
+++ b/packages/playground-vue/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+// @ts-expect-error TODO: Properly handle this
 import App from './App.vue'
 import router from './router'