I've been trying to create a chart with recharts in react and I keep on getting the same issue with custom x-axis ticks rendering when using the <Brush /> component.

I have a chunk of data to display for 1 day: [{ date: '9:30', value: 1 }, { date: '9:35', value: 2 }, ...]

There are also x-axis ticks for every hour generated separately: ['9:00', '10:00', ...]

If I don't use zoom with the brush it looks like this but when I'm trying to zoom-in to see a specific time range all ticks disappear but one 😔.

I can get the brush to work without custom ticks but I really need to show only hours without any intermediate values like 9:45 on the x-axis. Would be very glad to hear any feedback.

React v17.0.2
Recharts v2.1.9
Chrome Version 103.0.5060.53 (Official Build) (x86_64)

This example in a sandbox: https://codesandbox.io/s/simple-area-chart-forked-4kojl9?file=/src/App.tsx