diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
index 3cd1b4004..45d812844 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
@@ -21,7 +21,7 @@ export interface SearchOption {
   icon: string;
   label: string;
   tooltip?: string;
-  component?: (props: SearchOptionProps) => VNode;
+  component: (props: SearchOptionProps) => VNode;
   defaultValue?: string;
   additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
 }
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
index c24c1d803..65cb9a050 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
@@ -95,15 +95,16 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
             </tr>
             <tbody className="search-options">
               {searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete, defaultValue }) => {
-                return component?.({
-                  attributeName,
-                  attributeType,
-                  note,
-                  refreshResults,
-                  error,
-                  additionalAttributesToDelete,
-                  defaultValue
-                });
+                const Component = component;
+                return <Component
+                  attributeName={attributeName}
+                  attributeType={attributeType}
+                  note={note}
+                  refreshResults={refreshResults}
+                  error={error}
+                  additionalAttributesToDelete={additionalAttributesToDelete}
+                  defaultValue={defaultValue}
+                />;
               })}
             </tbody>
             <BulkActionsList note={note} />