diff --git a/packages/components/src/Columns/Columns.test.tsx b/packages/components/src/Columns/Columns.test.tsx
index 2496611b42..1e33816aa2 100644
--- a/packages/components/src/Columns/Columns.test.tsx
+++ b/packages/components/src/Columns/Columns.test.tsx
@@ -132,3 +132,13 @@ test('supports stretching to full height', () => {
   const container = screen.getByTestId(/columns/);
   expect(container).toHaveStyle(`height: 100%`);
 });
+
+test('does work with non react elements', () => {
+  render(
+    <Columns columns={[1]} data-testid="columns">
+      hello
+    </Columns>
+  );
+  const container = screen.getByTestId(/columns/);
+  expect(container).toHaveTextContent('hello');
+});
diff --git a/packages/components/src/Columns/Columns.tsx b/packages/components/src/Columns/Columns.tsx
index 95d20905d2..94576a0f01 100755
--- a/packages/components/src/Columns/Columns.tsx
+++ b/packages/components/src/Columns/Columns.tsx
@@ -59,7 +59,7 @@ export const Columns = ({
             flexGrow: columns[idx],
           }}
         >
-          {isValidElement(child) ? cloneElement(child) : null}
+          {isValidElement(child) ? cloneElement(child) : child}
         </Box>
       ))}
     </Box>