diff --git a/packages/filter/src/filter-rule/index.tsx b/packages/filter/src/filter-rule/index.tsx
index 3860ddd..559ad2a 100644
--- a/packages/filter/src/filter-rule/index.tsx
+++ b/packages/filter/src/filter-rule/index.tsx
@@ -27,23 +27,20 @@ export const FilterRule = ({ rule }: FilterRuleProps) => {
   return (
     <div>
       <SelectView
-        // Note: Can't use path.join('.') here because
-        // [].join('.') will return an empty string ''
-        // but ''.split('.') will return ['']
-        // which is not same as []
-        value={JSON.stringify(rule.path)}
+        value={selectedField}
         options={filterableFields.map((field) => ({
-          value: JSON.stringify(field.path),
+          value: field,
           label: mapFieldName(field),
         }))}
-        onChange={(pathStr) => {
+        onChange={(newField) => {
           updateRule({
             ...rule,
             // Clear filter name when field changed
             name: undefined,
+            // name: newField.filterList[0].name,
             // Reset arguments when field changed
             arguments: [],
-            path: JSON.parse(pathStr),
+            path: newField.path,
           });
         }}
       />
diff --git a/packages/filter/src/specs/preset.tsx b/packages/filter/src/specs/preset.tsx
index 4116498..73ca17c 100644
--- a/packages/filter/src/specs/preset.tsx
+++ b/packages/filter/src/specs/preset.tsx
@@ -139,7 +139,7 @@ const SelectView = <T,>({
   );
   return (
     <SelectPrimitive value={selectedIdx} onChange={handleChange} {...props}>
-      <OptionPrimitive key={-1} value={-1} hidden disabled></OptionPrimitive>
+      <OptionPrimitive key={-1} value={-1} disabled></OptionPrimitive>
       {options.map(({ label }, index) => (
         <OptionPrimitive key={label} value={index}>
           {label}