How to dynamically display these data in a row?

How do I stack these data into something like this where each products and colors are in one row?
enter image description here

I did try with this, however, it ended up looking like this:
enter image description here

codesandbox:
https://codesandbox.io/s/responsivestack-material-demo-forked-330ogi?file=/demo.js

Codes:

{newProduct &&
        newProduct.map((item, i) => (
          <>
            <Stack
              key={i}
              direction={{ xs: "column", sm: "row" }}
              spacing={{ xs: 1, sm: 2, md: 4 }}
            >
              <Stack direction="row" spacing={2}>
                <ListItemText primary={item.prodName + " " + item.size} />
                Icon here ->
              </Stack>

              {Object.entries(item.colorMap).map((color) => (
                <>
                  <ListItemText secondary={`${color[0]} - ${color[1]}pcs`} />
                </>
              ))}
            </Stack>
          </>
        ))}