How to make a multi x axis bar chart in rechart with values from a JSON where a group of elements share id

Currently Im working on a React/JS project where I read a JSON with this structure for data:

sprintId = [num] username = [string] completedTasks = [num]

And I need to make a graph like this with those values:

Click the link to see the image of reference T^T graph example

I've been trying a lot of things but they don't seem to work, these are my attempts so far:

const firstData = taskGraphKpis.map(item => ({ sprint: item.sprintId, dev: item.username, tasks: item.completedTasks })) const groupedFirst = Object.groupBy(firstData, ({ sprintId }) => sprintId); const devs = [...new Set(taskGraphKpis.map(item => item.username))];

of note: taskGraphKpis is a const where I store the values read from the JSON.

and for the graph

<ChartContainer title="Daily Task Completion"> <ResponsiveContainer width="100%" height={350}> <BarChart data={firstData}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="sprintId" /> <YAxis /> <Tooltip /> <Legend /> {devs.map((dev) => ( <Bar key={dev} dataKey={dev} stackId="a" fill="#564dfa"/> ))} </BarChart> </ResponsiveContainer> </ChartContainer>

Normally what happens when I test it, it does seem to keep the sprints from the same id together and the devs separate but it doesnt display any info, it should display the tasksDone.

How can I make this work?