Scanner closes unexpectedly in TabBarView

[ChinHairSaintClair]

Good day,

I'm attempting to create something along the lines of the below image

However, nesting the mobile scanner within a TabBarView has caused some unexpected behavior. Just swiping from side to side works as expected (when AutomaticKeepAliveClientMixin is used ). Clicking on the MY CODE tab button and then swiping back to the SCAN CODE, causes the scanner to stop and display a white screen (as shown below).

QR code screen content:

Scaffold(
  appBar: AppBar(
    title: const Text('QR code'),
    actions: [],
    bottom: TabBar(
      controller: _tabController,
      tabs: const [
        SizedBox(child: Tab(text: 'MY CODE')),
        SizedBox(child: Tab(text: 'SCAN CODE')),
      ],
    ),
  ),
   body: TabBarView(
      controller: _tabController,
      children: <Widget>[
        const Center(
          child: Text('MY CODE'),
        ),
        ScannerWrapper(
          scannerController: _scannerController,
          onDetect: _onDetect,
        )
      ],
    ),
)

Scanner wrapper:

typedef OnDetect = Function(Barcode barcode, MobileScannerArguments? args);
class ScannerWrapper extends StatefulWidget {
  final MobileScannerController scannerController;
  final OnDetect onDetect;
  const ScannerWrapper({Key? key, required this.scannerController, required this.onDetect}) : super(key: key);

  @override
  _ScannerWrapperState createState() => _ScannerWrapperState();
}

class _ScannerWrapperState extends State<ScannerWrapper> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Stack(
      children: [
        MobileScanner(
          controller: widget.scannerController,
          onDetect: widget.onDetect,
          allowDuplicates: false,
        ),
        QRScannerOverlay(overlayColour: Colors.black.withOpacity(0.7))
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Is there a way around this?