Unequal Y Axis Point in Recharts Library of React.js

Question

I wants to know that if there is any way to plot unequal scale of Y Axis in the Recharts Library of React.js Like in the example in the image

Link for the image: https://i.stack.imgur.com/ZyF49.png it is an example of Stacked Bar Charts Area of all the bars will be same but their values on y axis will be different

like for red it will be 0 - 70 yellow 70 - 80 lightgreen 80 - 90 green 90 - 100 but their height should be same only their value will be different

const data = [
  {
    name: "Page A",
    uv: 10
  },
  {
    name: "Page B",
    uv: 20
  },
  {
    name: "Page C",
    uv: 30
  },
  {
    name: "Page D",
    uv: 40
  },
  {
    name: "Page E",
    uv: 50
  },
  {
    name: "Page F",
    uv: 60
  },
  {
    name: "Page G",
    uv: 70
  },
  {
    name: "Page H",
    uv: 80
  },
  {
    name: "Page I",
    uv: 90
  },
  {
    name: "Page J",
    uv: 100
  }
];

export default function App() {
  return (
    <ComposedChart
      width={500}
      height={400}
      data={data}
      
    >
      <CartesianGrid stroke="#f5f5f5" />
      <XAxis dataKey="name" scale="band" />
      <YAxis domain={[0,100]} />
      <Tooltip />
      <Legend />
      <Bar dataKey="uv" barSize={20} fill="#413ea0" />
    </ComposedChart>
  );
}