diff --git a/src/Components/Facility/SpokeFacilityEditor.tsx b/src/Components/Facility/SpokeFacilityEditor.tsx
index 435120ca275..99a223dcebf 100644
--- a/src/Components/Facility/SpokeFacilityEditor.tsx
+++ b/src/Components/Facility/SpokeFacilityEditor.tsx
@@ -78,7 +78,8 @@ export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
     setItem: (item: FacilitySpokeModel | FacilitySpokeRequest) => void,
     processing: boolean,
   ) => {
-    const [selectedFacility, setSelectedFacility] = useState<FacilityModel>();
+    const [selectedFacility, setSelectedFacility] =
+      useState<FacilityModel | null>(null);
 
     useEffect(() => {
       setItem({ ...item, spoke: selectedFacility?.id });
@@ -99,8 +100,7 @@ export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
             showNOptions={8}
             selected={selectedFacility}
             setSelected={(v) =>
-              (v === undefined || (!Array.isArray(v) && v)) &&
-              setSelectedFacility(v)
+              (v === null || (!Array.isArray(v) && v)) && setSelectedFacility(v)
             }
             errors=""
             className="w-full"
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index 4d8195ae122..19ee4f2a08a 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -92,7 +92,7 @@ const AutoCompleteAsync = (props: Props) => {
   return (
     <div className={className}>
       <Combobox
-        value={selected?.length > 0 ? selected : null}
+        value={selected}
         disabled={disabled}
         onChange={onChange}
         by={compareBy}
@@ -100,7 +100,7 @@ const AutoCompleteAsync = (props: Props) => {
         immediate
       >
         <div className="relative mt-1">
-          <div className="flex">
+          <div className="relative flex">
             <ComboboxInput
               id={id}
               name={name}
@@ -133,7 +133,7 @@ const AutoCompleteAsync = (props: Props) => {
                         className="h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
                         onClick={(e) => {
                           e.preventDefault();
-                          onChange(undefined);
+                          onChange(null);
                         }}
                       />
                       <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">