Bug: How to mask sprites with sprites in pixi-react?

[realwugang]

Current Behavior

Expected Behavior

https://pixijs.com/7.x/playground?state=undefined&exampleId=masks.sprite

Steps to Reproduce

https://codesandbox.io/p/sandbox/mask-xzyqxx?file=%2Fsrc%2FApp.js%3A19%2C36

Environment

"dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^5.0.0",
    "pixi.js-legacy": "7.4.2",
    "@pixi/react": "7.1.2"
  }

import { Application as PixiApplication } from "@pixi/app";
import { useRef, useCallback } from "react";
import { Stage, Container, Graphics, _ReactPixi, Sprite } from "@pixi/react";

export default function App() {
  const spriteRef = useRef();
  const graphicsRef = useRef();

  const draw = useCallback((g) => {
    g.beginFill("#eeeeee");
    g.drawRect(0, 0, 100, 100);
  }, []);

  return (
    <div className="App">
      <Stage
        width={window.innerWidth}
        height={window.innerHeight}
        options={{
          backgroundAlpha: 0,
          antialias: true,
          resolution: window.devicePixelRatio,
          forceCanvas: true
        }}
      >
        <Container>
          <Sprite
            mask={spriteRef.current}
            image="https://pixijs.com/assets/cells.png"
            scale={1.5}
          />
          <Sprite
            ref={spriteRef}
            image="https://pixijs.com/assets/flowerTop.png"
            x={310}
            y={190}
            anchor={0.5}
          />
          <Graphics ref={graphicsRef} draw={draw} />
        </Container>
      </Stage>
    </div>
  );
}

Possible Solution

No response

Additional Information

No response

[realwugang]

help!