diff --git a/packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx b/packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx
index 3f73a50ec95..7ce8245e5ef 100644
--- a/packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx
+++ b/packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx
@@ -35,12 +35,10 @@ export function FilterByCondition(props: { model: ByConditionsModel }) {
     const localeService = useDependency(LocaleService);
 
     // form state is from the model
-    const condition = useObservable(model.conditionItem$, undefined, true);
-    const formParams = useObservable(model.filterConditionFormParams$, undefined, true);
-    const { operator, numOfParameters } = condition;
-    const { operator1, operator2, val1, val2, and } = formParams;
+    const condition = useObservable(model.conditionItem$, undefined);
+    const formParams = useObservable(model.filterConditionFormParams$, undefined);
 
-    const radioValue = and ? 'AND' : 'OR';
+    const radioValue = formParams?.and ? 'AND' : 'OR';
     const onRadioChange = useCallback((key: string | number | boolean) => {
         model.onConditionFormChange({ and: key === 'AND' });
     }, [model]);
@@ -79,20 +77,24 @@ export function FilterByCondition(props: { model: ByConditionsModel }) {
     return (
         <div className={styles.sheetsFilterPanelConditionsContainer}>
             {/* primary condition */}
-            <Select value={operator} options={primaryOptions} onChange={onPrimaryConditionChange} />
-            {FilterConditionItems.getItemByOperator(operator).numOfParameters !== 0
-                ? (
-                    <div className={styles.sheetsFilterPanelConditionsContainerInner}>
-                        {numOfParameters >= 1 && renderSecondaryCondition(operator1!, val1 ?? '', 'operator1')}
-                        {numOfParameters >= 2 && renderSecondaryCondition(operator2!, val2 ?? '', 'operator2')}
-                        <div className={styles.sheetsFilterPanelConditionsDesc}>
-                            {localeService.t('sheets-filter.panel.?')}
-                            <br></br>
-                            {localeService.t('sheets-filter.panel.*')}
-                        </div>
-                    </div>
-                )
-                : null}
+            {(condition && formParams) && (
+                <>
+                    <Select value={condition.operator} options={primaryOptions} onChange={onPrimaryConditionChange} />
+                    {FilterConditionItems.getItemByOperator(condition.operator).numOfParameters !== 0
+                        ? (
+                            <div className={styles.sheetsFilterPanelConditionsContainerInner}>
+                                {condition.numOfParameters >= 1 && renderSecondaryCondition(formParams.operator1!, formParams.val1 ?? '', 'operator1')}
+                                {condition.numOfParameters >= 2 && renderSecondaryCondition(formParams.operator2!, formParams.val2 ?? '', 'operator2')}
+                                <div className={styles.sheetsFilterPanelConditionsDesc}>
+                                    {localeService.t('sheets-filter.panel.?')}
+                                    <br></br>
+                                    {localeService.t('sheets-filter.panel.*')}
+                                </div>
+                            </div>
+                        )
+                        : null}
+                </>
+            )}
         </div>
     );
 }