如何在 React 上上下渲染对象？

Question

所以基本上我有一个这样的对象列表：

const objects = [{name: 'some name', count: 'how many of that name'}, ...]

我正在尝试像这样渲染它们：

        {objects.map((item) => (
            <Grid item key={item.name} xs={2} style={styles.count}>
                <Typography
                    key={item.name}
                    align="right"
                    component="h1">
                    {`${item.name}: ${item.count}`}
                </Typography>
            </Grid>
        ))}

你可以想象结果是这样的

name 1: 4   name 2: 4    name 3: 4
name 4: 4   name 4: 4

但我需要这样的东西：

name 1: 4   name 3: 4    name 5: 4
name 2: 4   name 4: 4