diff --git a/.eslintrc.js b/.eslintrc.js
index 294d2a44f9..70d2426174 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -60,6 +60,13 @@ module.exports = {
               message:
                 '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
             },
+            // See https://github.com/jsx-eslint/eslint-plugin-react/issues/2073
+            {
+              selector:
+                ":matches(JSXElement, JSXFragment) > JSXExpressionContainer > LogicalExpression[operator='&&']",
+              message:
+                "Please use `condition ? <Jsx /> : null`. Otherwise, there is a chance of rendering '0' instead of '' in some cases. Context: https://stackoverflow.com/q/53048037",
+            },
           ],
         },
       };
diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/PageOptionsPanel.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/PageOptionsPanel.tsx
index fe056938d9..29a70174cb 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/PageOptionsPanel.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/PageOptionsPanel.tsx
@@ -35,7 +35,7 @@ export default function PageOptionsPanel() {
         <Divider variant="middle" sx={{ alignSelf: 'stretch' }} />
         <Typography variant="subtitle1">Page State:</Typography>
         <UrlQueryEditor pageNodeId={pageNodeId} />
-        {DEPRECATED && <DerivedStateEditor />}
+        {DEPRECATED ? <DerivedStateEditor /> : null}
         <QueryStateEditor />
       </Stack>
     </div>