Component returning nested React Elements not displaying

I have a default component Collection which uses a sub-component called RenderCollectionPieces to display UI elements. I can’t figure out why I am able to see the data for image.name in the console but not able to see the UI elements display.

Additional information:

• There are no errors in the console
• If I replace <p>{image.name}</p> with <p>TESTING</p>, still nothing shows.
• columnOrg is a list of lists
• each list in columnOrg is a list of maps with some attributes

Index.js:

const RenderCollectionPieces = () => {
  const {collectionId} = useParams();  
  let listOfImageObjects = collectionMap[collectionId];
  let imagesPerColumn = Math.ceil(listOfImageObjects.length / 4);
  let columnOrg = [];

  while (columnOrg.length < 4){
    if(imagesPerColumn > listOfImageObjects.length){
      imagesPerColumn = listOfImageObjects.length;
    }
    columnOrg.push(listOfImageObjects.splice(0,imagesPerColumn))
  }
 
  let collectionList = columnOrg.map((col) => {
        return(            
            <Grid item sm={3}>
              {
                col.map((image) => {
                  console.log(image.name)
                  return(
                    <p>{image.name}</p>
                  )
                })
              }
            </Grid>
        )
    });
  return collectionList;
};

const Collection = ({ match }) => {
  const {collectionId} = useParams();
  return(
    <Box sx={{ background:'white'}}>
      <Grid container>           
        <RenderCollectionPieces />          
      </Grid>
  </Box>
  )
};

export default Collection;