I can’t understand what I’m doing wrong, I need it to be like this example:
Corretly graphic as example

This is the json data I receive:

[
  {
    "label": "Others",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      22,
      0,
      80
    ]
  },
  {
    "label": "AWS",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      2,
      0,
      21
    ]
  },
  {
    "label": "Github Enterprise Cloud - Organization",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      1,
      0,
      8
    ]
  },
  {
    "label": "Okta Admin Console",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      2,
      0,
      10
    ]
  },
  {
    "label": "PacificTimeSheet",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      0,
      0,
      12
    ]
  },
  {
    "label": "ArgoCD - Dev",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "kubero",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "Okta Dashboard",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "ArgoCD - Production IPV6",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "Okta Browser Plugin",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "Vercel",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "ONEDigital Portal Prod",
    "type": "bar",
    "stack": "Person 1",
    "data": [
      0,
      0,
      6
    ]
  },
  {
    "label": "Others",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      8,
      0,
      16
    ]
  },
  {
    "label": "AWS",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      2,
      0,
      1
    ]
  },
  {
    "label": "Github Enterprise Cloud - Organization",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      2
    ]
  },
  {
    "label": "Okta Admin Console",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "PacificTimeSheet",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      1
    ]
  },
  {
    "label": "ArgoCD - Dev",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "kubero",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "Okta Dashboard",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "ArgoCD - Production IPV6",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "Okta Browser Plugin",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "Vercel",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "ONEDigital Portal Prod",
    "type": "bar",
    "stack": "Person 2",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "Others",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      18,
      0,
      217
    ]
  },
  {
    "label": "AWS",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      3,
      0,
      17
    ]
  },
  {
    "label": "Github Enterprise Cloud - Organization",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      1,
      0,
      7
    ]
  },
  {
    "label": "Okta Admin Console",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      0,
      0,
      11
    ]
  },
  {
    "label": "PacificTimeSheet",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      0,
      0,
      2
    ]
  },
  {
    "label": "ArgoCD - Dev",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "kubero",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      4,
      0,
      0
    ]
  },
  {
    "label": "Okta Dashboard",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      2,
      0,
      4
    ]
  },
  {
    "label": "ArgoCD - Production IPV6",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "Okta Browser Plugin",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      3,
      0,
      3
    ]
  },
  {
    "label": "Vercel",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      0,
      0,
      0
    ]
  },
  {
    "label": "ONEDigital Portal Prod",
    "type": "bar",
    "stack": "Person 3",
    "data": [
      0,
      0,
      0
    ]
  }
]

This is my initial code:

const parsed = {
        labelsX2: ["May", "June", "July"],
        labelsX: ["Person 1", "Person 2", "Person 3", "Person 1", "Person 2", "Person 3", "Person 1", "Person 2", "Person 3"], // example names but should be according json stacks
        datasets: json.map((item) => {
            console.info("item: ", item);

            const { label, data, stack } = item;
            return {
                ...item,
                label,
                data,
                stack
            };
        }),
    };

    const [chartData, setChartData] = React.useState(parsed);

    const options = {
        plugins: {
            tooltip: {
                title: "Total",
            },
            subtitle: {
                display: true,
                text: "Number of events",
                position: 'left'
            },
            legend: {
                display: true,
                position: 'right',
            },
        },
        scales:{
            x: {
                type: 'category',
                stacked: true,
                labels: parsed.labelsX,
            },
            x2: {
                type: 'category',
                stacked: true,
                labels: parsed.labelsX2,
            },
            y: {
                stacked: true,
            },
        }
    };


// ...

<div className="chart-container">
    <h2 style={{textAlign: "center"}}>Bar Chart</h2>
    <Bar
        data={chartData}
        options={options}
    />
</div>

It always gets broken like this and I can’t understand what I’m handling wrong.
If anyone can help me, I would appreciate it. I have been looking at documentation and forums for a long time and I have not found a solution.

Wrong graphic using my code

As explained previously, I need the graph to be similar to the example in the first image:
Corretly graphic as example

But it is returning incorrectly and I can’t understand what I’m doing wrong and how I can fix it. Maybe this isn’t just my problem and I already consider this type of graph complex.