diff --git a/library/src/components/Schema.tsx b/library/src/components/Schema.tsx
index 8ec964f8a..10d4a5e4e 100644
--- a/library/src/components/Schema.tsx
+++ b/library/src/components/Schema.tsx
@@ -377,18 +377,20 @@ interface SchemaPropertiesProps {
 const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
   schema,
 }) => {
-  const properties = schema.properties();
-  if (properties === undefined || !Object.keys(properties)) {
+  const properties = Object.entries(schema.properties() ?? {});
+  const patternProperties = Object.entries(schema.patternProperties() ?? {});
+
+  if (!properties.length && !patternProperties.length) {
     return null;
   }
 
   const required = schema.required() ?? [];
-  const patternProperties = schema.patternProperties();
 
   return (
     <>
-      {Object.entries(properties).map(([propertyName, property]) => (
+      {properties.map(([propertyName, property]) => (
         <Schema
+          key={propertyName}
           schema={property}
           schemaName={propertyName}
           required={required.includes(propertyName)}
@@ -398,21 +400,19 @@ const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
             propertyName,
             schema,
           )}
+        />
+      ))}
+
+      {patternProperties.map(([propertyName, property]) => (
+        <Schema
           key={propertyName}
+          schema={property}
+          schemaName={propertyName}
+          isPatternProperty
+          isProperty
+          isCircular={property.isCircular()}
         />
       ))}
-      {Object.entries(patternProperties ?? {}).map(
-        ([propertyName, property]) => (
-          <Schema
-            schema={property}
-            schemaName={propertyName}
-            isPatternProperty
-            isProperty
-            isCircular={property.isCircular()}
-            key={propertyName}
-          />
-        ),
-      )}
     </>
   );
 };