Heatmap x-axis datetime ticks do not line up with data

[Lahe]

Description

Heatmap x-axis ticks do not line up with the rectangles being drawn when xaxis: { type: 'datetime' } is set.

Steps to Reproduce

1. Create a heatmap with xaxis: { type: 'datetime' }.
2. (optional) Create a range annotation on the x-axis to have a better visual of the problem.
3. See how the heatmap rectangles are misaligned from the ticks.

Expected Behavior

Heatmap rectangle widths should line up with the x-axis tick gaps.

Actual Behavior

Heatmap rectangles do not line up with the x-axis ticks.

Screenshots

Reproduction Link

https://codesandbox.io/s/crazy-chaum-2wjgzj?file=/src/App.js

First chart shows the problem described above.

Second chart shows a line chart and how the data points line up with the x-axis ticks as they should.

Last chart is an attempt to use xaxis: { type: 'category', tickPlacement: 'on' } as a workaround, but the tick placement does not work and the ticks are still drawn in between the data points.

[Khazl]

Have the same issue. Seems like it's still not fixed. Anyone a idea how to work-around this?