bars in recharts position space-between

Problem which I have is that, when I get data (array of objects), and I have 6 or more objects, the bars display properly, but when I recive for example only 4 bars the gap between bars is very big.

I want to have always the same gap between bars, regardless of how much items I recive from backend.

For example when I get only 2 items I want to Bars stack from top to bottom, in 20px gap between them.

Right now (the images below show that), when I have 4 items the gap is much bigger, hwen I have for example 8 items.

There is a way to handle this?

        <ResponsiveContainer
      width="100%"
    >
      <BarChart
        layout="vertical"
        data={data}
        margin={{ top: 40, right: 20, bottom: 0, left: 100 }}

      >
        <YAxis
          dataKey="name"
          type="category"
          scale="band"
          axisLine={false}
          tickLine={false}
          tick={{ fontSize: 12 }}
          tickFormatter={customYAxisTick}
        />
        <XAxis type="number" hide />
        <Bar
          dataKey="counter"
          maxBarSize={20}
          fill="#00A0E1"
          isAnimationActive={false}
          onClick={(payload) => handleBarClick(payload)}
          onMouseEnter={(payload, index) => handleBarMouseEnter(index)}
          onMouseLeave={handleBarMouseLeave}
        >
          {data.map((item, i) => (
            <Cell
              key={`bar-cell-#${i}`}
              cursor="pointer"
              fill={i === activeBar ? '#5CD1FF' : '#00A0E1'}
            />
          ))}
          <LabelList dataKey="counter" position="right" />
        </Bar>
      </BarChart>
    </ResponsiveContainer>