Is it possible to create dragbox zoom functionality?

[rowley-pete]

I have the below component which works for a single dragbox but then I cannot draw anymore dragboxes to zoom further after the first one. Is it possible to create this functionality in this way? Also, how do I get the onBrushCleared event to trigger?

const GraphResponsive: React.FC<GraphResponsiveProps> = ({ theme, padding, children }: GraphResponsiveProps) => {
  const target = React.useRef(null);
  const [width] = useSize(target);

  const [zoomDomain, setZoomDomain] = useState(undefined);

  const [brushDomain, setBrushDomain] = useState<{
        x?: DomainTuple | undefined;
        y?: DomainTuple | undefined;
      }
    | undefined
  >({ x: [0, 0], y: [0, 0] });

  const handleZoom = (domain: any) => {
    setZoomDomain(domain);
  };
  const handleBrush = (domain: any) => {
    const zoom = { x: [...domain.x], y: [...domain.y] };
    handleZoom(zoom);
    setBrushDomain({ x: [0, 0], y: [0, 0] });
    console.log(domain);
  };

  const handleCleared = (domain: any) => {
    console.log('Cleared');
  };

  const VictoryDragContainer = createContainer<VictoryZoomContainerProps, VictoryBrushContainerProps>('zoom', 'brush');

  return (
    <div ref={target}>
      <VictoryChart
        width={width}
        height={Math.max(Math.min(width * 0.5, 400), 250)}
        containerComponent={
          <VictoryDragContainer
            allowPan={false}
            zoomDomain={zoomDomain}
            allowDraw={true}
            onBrushDomainChangeEnd={handleBrush}
            defaultBrushArea="none"
            brushDomain={brushDomain}
            onBrushCleared={handleCleared}
          />
        }
        theme={theme ?? VictoryTheme.grayscale}
        padding={padding}
      >
        {children}
      </VictoryChart>
    </div>
  );
};

export default GraphResponsive;```