Recharts: How to span bars on XAxis when using a number axis

Question

I am using recharts to create a bar chart. The graph can be re-rendered with different time filters. The server response includes only points with data. I get the timestamp for the start of the period + the interval. I also get the start and end of the time range for the chart, so I can use a type="number" with a domain.

Here is what I came up with

<ResponsiveContainer>
    <ReBarChart height={300} data={chart.data} barCategoryGap={0} margin={{ bottom: 10 }}>
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip labelFormatter={label => <TooltipLabel label={label} interval={chart.dates.interval} />} />
      {chart.keys.map(key => (
        <Bar {...key} stackId="a" barSize={32} />
      ))}
      <YAxis />
      <XAxis dataKey="time" tick={<XAxisLabel />} type="number" domain={[chart.dates.from, chart.dates.to]} />
    </ReBarChart>
  </ResponsiveContainer>

The issue is that I'm getting very narrow bars with a gap in between. Is there a way for me to take the whole width ? Instead of declaring 1 value for XAxis, declare a from and to ?

(playing with barSize didn't yield any result as it will get capped by the number axis)