Merge pull request #15054 from artsy/DIA-1050-homepage-hero-units-con…

…tains-a-duplicate-entry-when-logged-in

fix(home): ensures we count cells correctly when logged in

src/Components/HeroCarousel/HeroCarousel.tsx

@@ -1,5 +1,11 @@
 import { Media } from "Utils/Responsive"
-import type { FC, ReactNode } from "react"
+import {
+  Children,
+  type FC,
+  type ReactNode,
+  isValidElement,
+  useMemo,
+} from "react"
 import { HeroCarouselLarge } from "./HeroCarouselLarge"
 import { HeroCarouselSmall } from "./HeroCarouselSmall"
 
@@ -17,14 +23,19 @@ export const HeroCarousel: FC<React.PropsWithChildren<HeroCarouselProps>> = ({
   progressbarVariant,
   onChange,
 }) => {
+  const cells = useMemo(
+    () => Children.toArray(children).filter(isValidElement),
+    [children],
+  )
+
   return (
     <>
       <Media at="xs">
         <HeroCarouselSmall
           onChange={onChange}
           progressbarVariant={progressbarVariant}
         >
-          {children}
+          {cells}
         </HeroCarouselSmall>
       </Media>
 
@@ -34,7 +45,7 @@ export const HeroCarousel: FC<React.PropsWithChildren<HeroCarouselProps>> = ({
           fullBleed={fullBleed}
           progressbarVariant={progressbarVariant}
         >
-          {children}
+          {cells}
         </HeroCarouselLarge>
       </Media>
     </>