From 3821273aa20fce11190949c71b5584e932fafbe2 Mon Sep 17 00:00:00 2001
From: Enijar <TheEnijar@gmail.com>
Date: Fri, 21 Jul 2023 15:35:58 +0100
Subject: [PATCH] fix: filter children that are not valid

---
 src/components/layer.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/layer.tsx b/src/components/layer.tsx
index 470e660..88985ba 100644
--- a/src/components/layer.tsx
+++ b/src/components/layer.tsx
@@ -614,6 +614,13 @@ function Layer(
     };
   }, [ctx]);
 
+  const childs = React.useMemo(() => {
+    if (Array.isArray(children)) {
+      return children.filter((child) => React.isValidElement(child));
+    }
+    return React.isValidElement(children) ? children : [];
+  }, [children]);
+
   return (
     <LayerContext.Provider value={layerProviderValue}>
       <group
@@ -640,15 +647,12 @@ function Layer(
           />
         </mesh>
         <group renderOrder={renderOrder + zIndex + 1} ref={childrenGroupRef}>
-          {React.Children.map(children, (child, childIndex) => {
-            if (React.isValidElement(child)) {
-              return (
-                <group key={childIndex} ref={childGroupRefs[childIndex]}>
-                  {React.cloneElement(child, { ...child.props, childIndex })}
-                </group>
-              );
-            }
-            return child;
+          {React.Children.map(childs, (child, childIndex) => {
+            return (
+              <group key={childIndex} ref={childGroupRefs[childIndex]}>
+                {React.cloneElement(child, { ...child.props, childIndex })}
+              </group>
+            );
           })}
         </group>
       </group>