I have 2 BlocProvider of the same type, only one works

Question

I have a button inside CardItem that expands and collapsed So I put BlocProvider inside listview.builder.

So that each carditem takes a separate instance and runs on its own I have another button at the top that expands and collapses all carditem together.

So I put blocprovider at the top of the column.

But the top button does not work unless you delete blocprovider from the bottom.

What's the reason?

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: BlocProvider(
          create: (context) => ExpandedCubit(),
          child: Column(
            children: [
              const CustomSwitchMonthsAndYears(),
              spaceheight(10),
              const SummarySectionMonthlyAndDailyHomeView(),
              spaceheight(8),
              BlocBuilder<ExpandedCubit, ExpandedState>(
                builder: (context, state) {
                  return AppIconButton(
                    icon: state == const ExpandedState.collapsed()
                        ? AppIcons.arrowUp
                        : AppIcons.arrowDown,
                    onPressed: () {
                      context.read<ExpandedCubit>().emitExpandedState();
                    },
                    iconSize: 30,
                  );
                },
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: 8,
                  itemBuilder: (context, i) {
                    return Padding(
                      padding: const EdgeInsets.only(bottom: 8),
                      child: BlocProvider(
                        create: (context) => ExpandedCubit(),
                        child: const CardItem(),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}