I can't get target graphic with recharts library - reactjs

Question

I am here because I am trying to build a chart using recharts library and after many different attempts to get the desired result I still do not get it.
My target graphic should look similar to this:
I tried many different things like bar charts, stacked bar charts, composed charts, error bars, etc and I can't get my desired result.
The closest result I get so far is this:
But in the moment I try to align the black bars on top of the orange ones (with the stackId prop) I get this:
Does someone know if I can get the graphic I want with this library? Any help would be appreciated.
The code of the second graphic is this:
const customData = [
{ name: 'food', uv: 1000, pv: [1001,2000], amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 2300, pv: [2301,3700], amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 2200, pv: [2201,3500], amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 1800, pv: [1801,3300], amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<ComposedChart width={400} height={400} data={customData}>
<XAxis />
<YAxis />
<Bar dataKey="uv" fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" direction="y" />
</Bar>
<Bar dataKey="pv">
</Bar>
</ComposedChart>
</div>
);
}
}
The code of the third graphic is the same but I add the prop stackId="0" to both bars.
Thanks in advance to anyone that can help me.

Answer 1

Finally I found the solution by my self.
While googling the web I found this Rechart's issue which linked me to this other one. There I found a jsfiddle demo, with that code and a few changes I got the result I wanted.
This is the final result:
And this is the code:
const data = [
{ name: 'food', uv: 2000, pv: 1600, amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 3300, pv: 2000, amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 3200, pv: 1398, amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 2800, pv: 2400, amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<BarChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis xAxisId={0} />
<XAxis xAxisId={1} hide/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Bar dataKey="uv" xAxisId={1} fill="#000" />
<Bar dataKey="pv" xAxisId={0} fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" />
</Bar>
</BarChart>
</div>
);
}
}
I hope this helps someone else too.
Thanks !