XYChart not showing tooltip on right end of the x-axis scale

[jodoox]

I've reproduced a codesandbox MVE showing a case where tooltips do not show up on the right end of the x-axis scale.

Am i missing something in the setup or is this a bug? I have the impression that I'm following pretty closely the XYChart kitchen sink implementation from the Visx gallery but I may have skipped something.

import React from "react";
import { Axis, BarSeries, BarStack, Tooltip, XYChart } from "@visx/xychart";
import { timeFormat } from "d3-time-format";
import { format } from "date-fns";

import { data } from "./data";

type Datum = typeof data[0];

const accessors = {
  xAccessor: ({ _time }: Datum) => new Date(_time).getTime(),
  totalAccessor: ({ total }: Datum) => total,
  londonAccessor: ({ london }: Datum) => london,
  parisAccessor: ({ paris }: Datum) => paris
};

export const StackedBarChart = ({
  width,
  height
}: {
  width: number;
  height: number;
}) => {
  console.log(width, height);
  return (
    <XYChart
      width={width}
      height={height}
      xScale={{ type: "band", paddingOuter: 1, paddingInner: 0.05 }}
      yScale={{ type: "linear" }}
    >
      <Axis
        orientation={"bottom"}
        numTicks={4}
        tickFormat={timeFormat("%b %d")}
      />
      <Axis orientation={"left"} numTicks={10} />
      <BarStack offset={"diverging"}>
        <BarSeries
          data={data}
          dataKey="Time"
          xAccessor={accessors.xAccessor}
          yAccessor={accessors.londonAccessor}
          radius={2}
        />
        <BarSeries
          data={data}
          dataKey={"paris"}
          xAccessor={accessors.xAccessor}
          yAccessor={accessors.parisAccessor}
          radius={2}
        />
      </BarStack>
      <Tooltip<Datum>
        snapTooltipToDatumX
        snapTooltipToDatumY
        showVerticalCrosshair
        renderTooltip={({ tooltipData }) => {
          console.log(tooltipData?.nearestDatum);
          if (
            !tooltipData?.nearestDatum?.datum ||
            !tooltipData?.nearestDatum?.key
          ) {
            return;
          }

          return (
            <div
              key={tooltipData.nearestDatum.key}
              style={{
                minWidth: 100
              }}
            >
              <p>
                {format(
                  new Date(accessors.xAccessor(tooltipData.nearestDatum.datum)),
                  "yyyy MMMM dd"
                )}
              </p>
              <hr />
              <p>
                Total:
                {accessors
                  .totalAccessor(tooltipData.nearestDatum.datum)
                  ?.toFixed(0)}
              </p>
              <p>
                paris:
                {accessors
                  .parisAccessor(tooltipData.nearestDatum.datum)
                  ?.toFixed(0)}
              </p>
              <p>
                london:
                {accessors
                  .londonAccessor(tooltipData.nearestDatum.datum)
                  ?.toFixed(0)}
              </p>
            </div>
          );
        }}
      />
    </XYChart>
  );
};