I have an array of months that I'm displaying along the x-axis of a graph. Using date-fns package to format the dates.

In this.props.data:

[
    {
        "month": 11,
        "year": 2020,
    },
    {
        "month": 12,
        "year": 2020,
    },
    ...
]

A method creates an array of DOM nodes:

  renderXAxis() {
    const items = [];

    if (this.props.data.length) {
      for (const data of this.props.data) {
        const month = formatDate(setMonth(new Date(), data.month - 1), 'MMM');

        items.push(
          <div className="Chart__x-axis__item" key={month + data.year}>
            <div className="Chart__x-axis__item__month">{month}</div>
          </div>,
        );
      }
    }

    return items;
  }

In my render method, I call:

<div className="Chart__x-axis">{this.renderXAxis()}</div>

It renders the xAxis with all items displaying the same month. What is weird to me is that if I change the DOM node that gets pushed to the item array to:

    items.push(
      <div className="Chart__x-axis__item" key={month + data.year}>
        <div className="Chart__x-axis__item__month">{`${month}`}</div>
      </div>,
    );

or

    items.push(
      <div className="Chart__x-axis__item" key={month + data.year}>
        <div className="Chart__x-axis__item__month">{formatDate(setMonth(new Date(), data.month - 1), 'MMM')}</div>
      </div>,
    );

then the months all render as they should. I don't understand why or what is going on..