diff --git a/ui/src/components/MacroStepCard.tsx b/ui/src/components/MacroStepCard.tsx
index 82646949..e6b7c356 100644
--- a/ui/src/components/MacroStepCard.tsx
+++ b/ui/src/components/MacroStepCard.tsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { LuArrowUp, LuArrowDown, LuX, LuTrash2 } from "react-icons/lu";
 
 import { Button } from "@components/Button";
-import { Combobox } from "@components/Combobox";
+import { Combobox, ComboboxOption } from "@components/Combobox";
 import Card from "@components/Card";
 import FieldLabel from "@components/FieldLabel";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
@@ -209,8 +209,9 @@ export function MacroStepCard({
           )}
           <div className="relative w-full">
             <Combobox
-              onChange={(value) => {
-                onKeySelect({ value: value as string | null });
+              onChange={(option) => {
+                const selectedOption = option as ComboboxOption | null;
+                onKeySelect({ value: selectedOption?.value ?? null });
                 onKeyQueryChange('');
               }}
               displayValue={() => keyQuery}