React ChartJS - difficulty manipulating data to a certain format - reactjs

Question

I have data stored in MongoDB that looks like this: (Example of 1 document below)
{_id: XXX,
project: 'Project ABC',
amount: 300,
expenseIncurredDate: 2022-03-15T08:24:46.000+00:00
}
I am trying to display my data in a stacked bar chart where the x-axis is year-month, and the y-axis is amount. Within each year-month, there can be several expenses incurred by different projects.
I am trying to achieve something like this, except that x-axis should show year-month (e.g. Jan 2021). Each project should be represented by one color for every year-month.
I am using Chart.js. Below is my Bar component.
import { Bar } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";
import React from "react";
const BarChart = ({ chartData }) => {
const options = {
responsive: true,
legend: {
display: false,
},
type: "bar",
scales: {
xAxes: [
{
stacked: true,
},
],
yAxes: [
{
stacked: true,
},
],
},
};
return <Bar data={chartData} options={options} />;
};
export default BarChart;
I am manipulating my data in another component:
let datasets = [];
function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = 100 + Math.floor(Math.random() * 256);
var z = 50 + Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
return bgColor;
}
let amounts = myExpenses.map((expense) => expense.amount);
myExpenses.forEach((expense) => {
const expenseObj = {
label: expense.project,
stack: 1,
borderWidth: 1,
backgroundColor: random_bg_color(),
data: amounts,
};
datasets.push(expenseObj);
});
let data = {
labels: myExpenses.map((expense) =>
moment(expense.expenseDate, "DD-MM-YYYY")
),
datasets: datasets,
};
I know this doesn't work as it isn't returning amounts in the correct order/grouped by year & month.
let amounts = myExpenses.map((expense) => expense.amount);
I am having difficulty trying to group the amount by year month. Would appreciate any help on this, thank you.