NextJS Pixie "Cannot read properties of null (reading 'stage')"

Question

I tried using an example from the pixi-react docs inside NextJS and I ran into this issue. Any idea on what might solve this? My Pixi component is a client component, and I tried importing it dynamically without SSR.

Error:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'stage')

Source Code:

'use client'
import { useEffect, useRef } from 'react';
import * as PIXI from 'pixi.js';

const PixiComponent = () => {
  const draw = useCallback((g:any) => {
        g.clear();
        g.beginFill(0xff3300);
        g.lineStyle(4, 0xffd900, 1);
        g.moveTo(50, 50);
        g.lineTo(250, 50);
        g.lineTo(100, 100);
        g.lineTo(50, 50);
        g.endFill();
        g.lineStyle(2, 0x0000ff, 1);
        g.beginFill(0xff700b, 1);
        g.drawRect(50, 150, 120, 120);
        g.lineStyle(2, 0xff00ff, 1);
        g.beginFill(0xff00bb, 0.25);
        g.drawRoundedRect(150, 100, 300, 100, 15);
        g.endFill();
        g.lineStyle(0);
        g.beginFill(0xffff0b, 0.5);
        g.drawCircle(470, 90, 60);
        g.endFill();
      }, []);
    
      return (
        <Stage width={600} height={300} options={{ backgroundColor: 0xffffff }}>
            <Container>

          <Graphics draw={draw} />
            </Container>
        </Stage>
      );
};

export default PixiComponent;

// page.tsx
import dynamic from 'next/dynamic';

const PixiComponent = dynamic(() => import('./components/graphics/Bunny'), { ssr: false });
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <PixiComponent />
    </main>
  );
}