React how to wrap each 3 elements in a div?

Question

The intended output here should be each 3 divs (red) within a blue div. I don't understand what I am doing wrong because this should normally work.

// tried this method, https://stackoverflow.com/questions/63695426/react-wrap-every-3-components-into-a-div can't get it to work. ‍♂️

const ImageGrid = ({slice} :any) => (

  slice?.items?.map((item :any, i:number) => {
    const myArrx :any = []
    myArrx.push(<Box bg={'red'} p={15}><img src={item.image.url} alt={item.image.alt} /></Box>)
    
    return myArrx.reduce((groups :any, curr:any) => {
      const arr : any[] = groups[groups.length - 1];      
      arr.push(curr);
      if (arr.length === 3) groups.push([]);
      return <Box bg={'blue'} p={15}>{groups}</Box>;
    }, [[]])
    
  })

)

Answer 1

I was trying to doit the hard way, here's the simple and elegant solution

const ImageGrid = ({slice} :any) => {
  const pack :any = []
  
  slice?.items?.map((item :any, i:number) => {
    pack.push(<Child data={item}/>)
  })
  
  const data2 = [...pack]
  const groupedData1 = []
  
  while(data2.length) {
    groupedData1.push(data2.splice(0, 3));
  }

  return (
    <>
      <Container maxW={1180} bg='orange'>
        <GridWrap>
          {groupedData1.map((el, i) => 
            <Parent>
              <HStack alignItems={'top'}> {el} </HStack>
            </Parent>
          )}
        </GridWrap>
      </Container>
    </>
  )
}