Bug: changing the hitArea prop does not change the hit area of the underlying pixi element

[CaptainTux]

Current Behavior

When supplying the hitArea prop with hitArea={new Rectangle(0, 0, width, height)} to an element, the hit area does not actually change if the width or height change after the first render of the component.

Expected Behavior

The hit area of the element corresponds to the rectangle supplied to the hitArea prop.
As a workaround I created this hook, which is rather inconvenient, but it works.

import { Rectangle } from "pixi.js";
import { useLayoutEffect, useRef } from "react";

export const useHitArea = (x: number, y: number, width: number, height: number) => {
  const rectRef = useRef(new Rectangle(x, y, width, height));

  useLayoutEffect(() => {
    rectRef.current.copyFrom(new Rectangle(x, y, width, height));
  }, [x, y, width, height]);

  return rectRef;
};

Steps to Reproduce

const MyContainer = () => {
  const width = 600;
  const [height, setHeight] = useState(600);
  return (
    <graphics
      eventMode="static"
      onMouseDown={() => {
        setHeight((prev) => prev - 100);
      }}
      hitArea={new Rectangle(0, 0, width, height)}
      draw={(g) => {
        g.clear();
        g.rect(0, 0, width, height).fill(0xff0000);
      }}
    />
  );
};

After clicking at the bottom of the rectangle, one can still click outside of the rectangle after it shrinks.
Unfortunately I cannot get the sandbox to run, but this example should demonstrate the problem.

Environment

• @pixi/react version: 8.0.0-beta.21
• pixi.js version: ^8.6.6
• React version: ^19.0.0
• ReactDOM version: ^19.0.0
• Browser & Version: FF, chrome, tauri app
• OS & Version: tested on win 10, win 11 and arch linux
• Running Example: https://codesandbox.io/p/sandbox/pixi-react-v8-hitarea-bug-7jsnkz

Possible Solution

No response

Additional Information

No response