Heatmap: Display exact x value for each series data on hover

[netervati]

I'm trying to create a heatmap similar to github contributions heatmap. My goal is to display a tooltip that shows the specific date (x value), week day (name), and activity value (y value) whenever the user hovers on a cell. Everything's working for the most part except for the tooltip.

I've tried and tested multiple options to display the exact x value for each cell on hover, however the heatmap keeps displaying the Sunday's x value only. Here's an example of the data:

var series = [
    {
    name: 'Sunday',
    data: [{
        x: '2022-02-20',
        y: 40
        }]
    },
    {
    name: 'Monday',
    data: [{
        x: '2022-02-21',
        y: 0
        }]
    },
    {
    name: 'Tuesday',
    data: [{
        x: '2022-02-22',
        y: 5
        }]
    },
    {
    name: 'Wednesday',
    data: [{
        x: '2022-02-23',
        y: 100
        }]
    },
    {
      name: 'Thursday',
      data: [{
        x: '2022-02-24',
        y: 17
      }]
    },
    {
      name: 'Friday',
      data: [{
        x: '2022-02-25',
        y: 4
      }]
    },
    {
      name: 'Saturday',
      data: [{
        x: '2022-02-26',
        y: 90
      }]
    },
];

When you hover on the Sunday cell, it displays the x value 2022-02-20, but when you hover on the cells of Monday and Saturday, it still displays 2022-02-20 on the tooltip. What can I do to display the exact x value of each data on the tooltip?