Confetti package animation not displaying correctly upon scroll

I'm using Package Confetti 0.6.0 ConfettiWidget() within Card()s generated in a GridView.builder

Upon scroll the animation stops working properly & even vanishes if I scroll too much.

I thought the issue had to do with lazy loading, so I tried two other particle animation widgets:

1. Particles 0.1.4 and
2. Animated Background 2.0.0

Both of which worked fine, displaying correct animation - even through scrolling.

-> It could be just an issue with Package Confetti 0.6.0, but I think the problem might come from the way I'm initializing the ConfettiController and calling .play() method & disposing of it.

Here is my complete simplified code:

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late ConfettiController _controllerCenter;

  @override
  void initState() {
    super.initState();
    _controllerCenter =
        ConfettiController(duration: const Duration(seconds: 1000));
    _controllerCenter.play();
  }

  @override
  void dispose() {
    _controllerCenter.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: SafeArea(
        child: new GridView.builder(
          itemCount: 30,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: Center(
// 
                child: ConfettiWidget(
                  confettiController: _controllerCenter,
                  shouldLoop: true,
                ),
//
              ),
            );
          },
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
        ),
      ),
    );
  }
}

-> I'd like to keep the animation running despite scrolling through the GridView.

I need to use a GridView.builder or GridView.count as data within the cards will be populated with Firebase Data.