Flyout text is rendered out of viewBox when hovering VictoryBar and it's Flyout component shows up

[RuFrontEnd]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Victory version

36.6.11

Code Sandbox link

https://codesandbox.io/p/sandbox/victory-chart-issue-vw8r49?file=%2Fsrc%2FApp.js

Bug report

I scroll the view box while I am hovering the VictoryBar with it's tooltip message showing up, but when I scroll out of the viewbox(my cursor is still on the VictoryBar I was hovering), the tooltip message is rendered out of the viewbox.  

this is the code:
import "./styles.css";
import React from "react";
import {
  VictoryBar,
  VictoryChart,
  VictoryZoomContainer,
  VictoryLine,
  VictoryLabel,
  VictoryAxis,
  VictoryTooltip,
  VictoryBrushContainer,
} from "victory";

function CustomFlyout({ x, y, orientation }) {
  const newY = orientation === "bottom" ? y - 35 : y + 35;
  return <div></div>;
}

export default function App() {
  return (
    <div style={{ paddingTop: 20 }}>
      <VictoryChart
        domainPadding={{ x: 40 }}
        width={800}
        padding={{ left: 30, right: 30, top: 30, bottom: 30 }}
        height={800}
        containerComponent={
          <VictoryZoomContainer
            zoomDimension="x"
            allowZoom={false}
            allowPan
            zoomDomain={{ x: [0, 20] }}
          />
        }
      >
        <VictoryBar
          style={{ data: { width: 20 } }}
          horizontal
          labelComponent={
            <VictoryTooltip
              constrainToVisibleArea
              // dy={0}
              // centerOffset={{ x: 0, y: 0 }}
              flyoutComponent={<CustomFlyout />}
            />
          }
          data={[
            { x: 0, y: 20, label: "AAA" },
            { x: 2, y: 20, label: "BBB" },
            { x: 4, y: 20, label: "CCC" },
            { x: 6, y: 20, label: "DDD" },
            { x: 8, y: 20, label: "EEE" },
            { x: 10, y: 20, label: "FFF" },
            { x: 12, y: 20, label: "GGG" },
            { x: 14, y: 20, label: "HHH" },
            { x: 16, y: 20, label: "III" },
            { x: 18, y: 20, label: "JJJ" },
            { x: 20, y: 20, label: "LLL" },
            { x: 22, y: 20, label: "MMM" },
            { x: 24, y: 20, label: "NNN" },
            { x: 26, y: 20, label: "OOO" },
            { x: 28, y: 20, label: "PPP" },
            { x: 30, y: 20, label: "QQQ" },
            { x: 32, y: 20, label: "RRR" },
            { x: 34, y: 20, label: "SSS" },
            { x: 36, y: 20, label: "TTT" },
            { x: 38, y: 20, label: "UUU" },
            { x: 40, y: 20, label: "VVV" },
            { x: 42, y: 20, label: "WWW" },
            { x: 44, y: 20, label: "XXX" },
            { x: 46, y: 20, label: "YYY" },
            { x: 48, y: 20, label: "ZZZ" },
            { x: 50, y: 50, label: "" },
          ]}
        />
      </VictoryChart>
    </div>
  );
}

thanks!

Steps to reproduce

1. hover the bar.
2. mouse down and scroll the viewbox(cursor stays on the bar).
3. the tooltip message will be rendered outside the viewbox.

Expected behavior

the tooltip message should not be rendered outside the viewbox.

Actual behavior

the tooltip message will be rendered outside the viewbox.

Environment

- Device: Desktop
- OS: windows 11
- Node: 16.14.0
- npm: 8.3.1
- Browser: Chrome

[RuFrontEnd]

5a6192d6-1741-4587-8d59-4a54cf5258bd.mp4