Date FNS module of Chart Js axis is displaying improperly

This is my chart

Here is my code I am using the date-fns module with chart js, the x axis fails to display some months and the spacing between the bars are also weirdly off centered.:

var expenseChartElement = document.getElementById('expenseGraph')

const rawExpense= JSON.parse('{{user["expenses"] | tojson}}')

// console.log(data["income1"]["amt"])
const dates = []



for (let expense in rawExpense){
    let parsedDate = new Date(rawExpense[expense]["date"]); // Ensure correct date parsing
    dates.push({ x: parsedDate, y: parseFloat(rawExpense[expense]["amt"]) });
}


console.log(dates)

    


const data = {
    datasets : [{
        label:"Expense Amount $",
        data : dates,
        backgroundColor:'rgba(54, 162, 235, 0.6)',
    }]

}


const config = {
    type:'bar',
    data,
    options: {
        scales:{
            x:{
                type:'time',
                time : {
                    unit : 'week'
                },
                
            },
            y:{
                beginAtZero:true
            }
        }
    }
};

expenseGraph = new Chart(expenseChartElement,config)

I tried offsetting the timezone, everything is in the right format but nothing works. Please Help. Thanks.