Months out of order using Nivo's ResponsiveBar

Question

Using Nivo's Responsive Bar (official docs here) and React, I've managed to create a bar chart with data showing up but the months on the X-axis are out of order. Here's the code and currently the X-axis is ordered by indexBy="month"

    return(
    <ResponsiveBar
      data={data}
      keys={['purchases']}
      indexBy="month"
      axisBottom={{
        tickSize: 0,
        tickPadding: 10,
        tickRotation: 0,
        legend: 'Month',
        legendPosition: 'middle',
        legendOffset: 50
      }}
     />
) 

The data={data} refers to an API GET.types.ts file.

export type DataResponse = { 
month: string; 
year: string; 
purchases: number; 
}[];

How do I get the months to be in order (from January to December)?

Any help or advice would be greatly appreciated, thank you in advance.