How do I fix this stacked bar chart (Chart.js)

This is my controller

$productStock = Product::select('quantity', 'prodName', 'updated_at')->get()->groupBy(function($productStock){
    return Carbon::parse($productStock->updated_at)->format('M');
});

foreach($productStock as $month => $stock){
            $productMonth[] = $month;
           
            foreach($stock as $stockValue){
                $productName[] = $stockValue->prodName;
                $productQty[] = $stockValue->quantity;
            }
        }

return view('adminHome', ['productStock' => $productStock,
        'productMonth' => $productMonth, "productName" => $productName, "productQty" => $productQty]);

Javascript in blade file

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
var product_Xaxis_data = JSON.parse('{!! json_encode($productMonth) !!}');
var product_Yaxis_data = JSON.parse('{!! json_encode($productQty) !!}');
var product_name_label = JSON.parse('{!! json_encode($productName) !!}');
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: product_Xaxis_data,
    datasets: [{
      label: product_name_label, 
      backgroundColor: getRandomColor(),
      borderColor: "rgba(2,117,216,1)",
      data: product_Yaxis_data, 
    }],
  },
  options: {
    scales: {
      xAxes: [{
        time: {
          unit: 'month'
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 6
        },
         stacked: true
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 200,
          maxTicksLimit: 6
        },
        gridLines: {
          display: true
        },
         stacked: true
      }],
    },
    legend: {
      display: false
    }
  }
});

</script>

This is the output is which is not what I wanted.
The bar did not stacked and end up merged together:
enter image description here

This is my desire output, The code below is just an example of how I wanted to get my desired output. Just need to replace with data in database:
enter image description here

 data: {
    labels: ["Dec"],
    datasets: [{
      label: "Metal Screw", 
      backgroundColor: getRandomColor(),
      borderColor: "rgba(2,117,216,1)",
      data: [100], 
    },
    {
      label: "Metal nut", 
      backgroundColor: getRandomColor(),
      borderColor: "rgba(2,117,216,1)",
      data: [80], 
    }],
  },