Stacked barchart in C3.js don't show group

I am trying to make a stacked barchart in C3.js with a JSON with the fields product, month, amount_sale, for example:

[{"product": "Pulp", "month": "january", "sale_amount": 320},
{"product": "Pulp", "month": "february", "sale_amount": 160},
{"product": "Beef", "month": "january", "sale_amount": 210},
{"product": "Beef", "month": "february", "sale_amount": 90}]

Then i try to generate a stacked bar graph that shows for each product the sale amount in each month, with the following code:

var chart = c3.generate({
  data: {
    json: data,
    keys: {
      x: "product",
      value: ["sale_amount"]
    },
    type: "bar",
    groups: [["month"]]
  },
  axis: {
    x: {
      type: "category"
    }
  }
});

But the graph shows me the product on the X axis but it does not take the month group, this can we see in:

https://codepen.io/NetWilson05/pen/bGmdMZR

what am i doing wrong?

the JSON format is wrong, has to be in the format: X, Col1, Col2,...

the full example is:

const data = [
  { "product": "Pulp", "month": "january", "sale_amount": 320 },
  { "product": "Pulp", "month": "february", "sale_amount": 160 },
  { "product": "Beef", "month": "january", "sale_amount": 210 },
  { "product": "Beef", "month": "february", "sale_amount": 90 }
];

const transformedData = data.reduce((acc, cur) => {
  const existingMonth = acc.find((item) => item.month === cur.month);
  
  if (existingMonth) {
    existingMonth[cur.product] = cur.sale_amount;
  } else {
    acc.push({ month: cur.month, [cur.product]: cur.sale_amount });
  }
  
  return acc;
}, []);

const chart = c3.generate({
  data: {
    json: transformedData,
    keys: {
      x: "month",
      value: ["Pulp", "Beef"]
    },
    type: "bar",
    groups: [["Pulp", "Beef"]]
  },
  axis: {
    x: {
      type: "category"
    }
  }
});

this is based on other response that a user delete later i dont know why