flutter when NestedScrollView's body scrolls fast the SliverPersistentHeader will overlap the content sometimes

Question

flutter when NestedScrollView's body scrolls fast the SliverPersistentHeader will overlap the body's content sometimes

here is the video:

https://youtube.com/shorts/d2un2Q5Nt0A?si=kpI_3wl2T2GVudG0

when the SliverPersistentHeader is not collapsed if my finger scrolls and leaves the screen quickly, sometimes the SliverPersistentHeader can not collapse as expected and will overlap the body's content.

here is the NestedScrollView

return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverPersistentHeader(
              pinned: true,
              delegate: MySliverPersistentHeaderDelegate(
                  maxHeight: menuBarHeight,
                  minHeight: 20,
                  content: (shrinkOffset){
                    print('shrinkOffset ${shrinkOffset}');
                    return EntertainmentMenuButtonBar(
                      opacity: shrinkOffset,
                    );
                  }
              ),
            ),
            SliverPersistentHeader(
              pinned: true,
              delegate: MySliverPersistentHeaderDelegate(
                maxHeight: 40,
                minHeight: 40,
                content: (shrinkOffset) {
                   return EntertainmentTopNavigationBar(
                    tabController: _tabController,
                    height: 40,
                    marginTop: 0,
                    scrollControllerCallback: _onHandleScrollControllerCallback,
                    tabValueCallback: _onHandleTabValueCallback,
                  );
                },
              ),
            ),
          ];
        },
        body: DefaultTabController(
          length: 3,
          child: TabBarView(
            controller: _tabController,
            children: const [
              Page1(),
              Page2(),
              Page3(),
            ],
          ),
        ),
      ),
    );

here is NestedScrollView's body

@override
  Widget build(BuildContext context) {
    int itemCount = enabledServiceUserList.length + 2;
    return dataLoaded
    ? Container(
        color: Colors.white,
        child: EasyRefresh(
          controller: EasyRefreshController(),
          onRefresh: () async {
            refresh();
          },
          child: ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              padding: const EdgeInsets.only(top: 0),
              itemCount: itemCount,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return const SizedBox(height: 0 );
                } else if (index == itemCount - 1 ) {
                  if(!isFinished && nextPageItemLoaded){
                    loadNextPageItems();
                  }
                  return Container(
                    child: Column(
                      children: [
                        DescribeText(title: isFinished ? "----" : ""),
                        const SizedBox(height: 60),
                      ],
                    ),
                  );
                } else {
                  return PersonalServiceCard(
                    userServiceMap: enabledServiceUserList[index-1],
                  );
                }
              }
          ),
        )
    )
    : Container();
  }

what I expected is that when the body scrolls up, the SliverPersistentHeader won't be stuck