Flutter BloC couldn't find correct provider when context.read is called

I created a basic project to learn Flutter better. In bnb.dart file if I use:

context.read<AppBottomNavigationBarState>().selectedIndex

to change the currentIndex field of the BottomNavigationBar. The application throws:

The following ProviderNotFoundException was thrown building
BlocBuilder<AppBottomNavigationBarCubit,
AppBottomNavigationBarState>

But if I change that line to:

state.selectedIndex

it works correctly. Why does it work when I change the line?

Down below you can see the dart files for my project.

bnb_cubit.dart:

class AppBottomNavigationBarCubit extends Cubit<AppBottomNavigationBarState> {
  AppBottomNavigationBarCubit()
      : super(AppBottomNavigationBarState(selectedIndex: 0));

  void change(int index) =>
      emit(AppBottomNavigationBarState(selectedIndex: index));
}

bnb_state.dart:

class AppBottomNavigationBarState {
  int selectedIndex;
  AppBottomNavigationBarState({required this.selectedIndex});
}

bnb.dart:

class AppBottomNavigationBar extends StatelessWidget {
  AppBottomNavigationBar({super.key});

  final List<Widget> screens = [HomeScreen(), SearchScreen(), LibraryScreen()];

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AppBottomNavigationBarCubit,
        AppBottomNavigationBarState>(
      builder: (context, state) {
        return Scaffold(
          bottomNavigationBar: BottomNavigationBar(
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home_filled),
                label: "Home",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: "Home",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.library_books),
                label: "Home",
              ),
            ],
            onTap: (value) {
              context.read<AppBottomNavigationBarCubit>().change(value);
            },
            currentIndex:
                context.read<AppBottomNavigationBarState>().selectedIndex,
          ),
          body: screens[state.selectedIndex],
        );
      },
    );
  }
}

main.dart:

Future<void> main() async {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider<AppBottomNavigationBarCubit>(
      create: (context) => AppBottomNavigationBarCubit(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: AppBottomNavigationBar(),
      ),
    );
  }
}