Tengo un contenedor de columna que acepta niños:

 const ThreeColumnWrapper: React.FC = (props) => { const { children } = props; const itemLength = React.Children.count(children); const isOdd = IsOdd(itemLength); const { isCompact } = MediaQuery(); return ( <Base> {React.Children.map(children, (child, index) => { return ( <> {isCompact && isOdd && index === 0 ? ( <Full>{child}</Full> ) : ( <ThreeByTwo>{child}</ThreeByTwo> )} </> ); })} </Base> ); };

Lo mapeo así:

 const columnComponentMap = { 3: ThreeColumnWrapper };

y en mi grilla lo llamo::

 const CategoryGrid: React.FC<PropType> = (props) => { const { categories, columns } = props; const Component = columnComponentMap[columns]; return ( <Component> {categories.map((category, index) => { <ImageCard key={index} imageURL={category.image} linkURL={category.url} title={category.title} aspectRatio="1_1" />; })} </Component> ); };

En mis datos de categorías tengo 7 ítems pero cuando llegan a mi Wrapper solo me sale indefinido, ¿por qué?

Imagen del resultado: