Problem with BottomNavigation and Pagecontroller when using animateToPage

Question

I have a simple PageView with 3 pages and a BottomNavigationBar. Code:

class BottomNavigator extends StatefulWidget {
  const BottomNavigator({super.key});

  @override
  State<BottomNavigator> createState() => _BottomNavigatorState();
}

class _BottomNavigatorState extends State<BottomNavigator> {
  int _selectedIndex = 1;

  final _pageController = PageController(initialPage: 1);

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

  static const List<Widget> _widgetOptions = <Widget>[
    HostPage(),
    HomePage(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: PageView(
          physics: const BouncingScrollPhysics(),
          onPageChanged: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          controller: _pageController,
          children: _widgetOptions,
        ),
      ),
      bottomNavigationBar: SafeArea(
        child: Padding(
          padding: EdgeInsets.only(bottom: 5.h),
          child: Theme(
            data: ThemeData(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            ),
            child: BottomNavigationBar(
              
              currentIndex: _selectedIndex,
              onTap: (index) {
                setState(() {
                  _selectedIndex = index;
                  _pageController.animateToPage(_selectedIndex,
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.ease);
                });
              },
              //unselectedItemColor: Color.fromRGBO(126, 123, 123, 1),
              //selectedItemColor: Colors.white,
              enableFeedback: false,
              backgroundColor: const Color.fromARGB(255, 12, 12,
                  12), //changes background of Botton Navigation Bar
              showSelectedLabels: true,
              showUnselectedLabels: false,
              selectedLabelStyle: const TextStyle(fontSize: 15),
              
              items: [
                BottomNavigationBarItem(
                  icon: SvgPicture.asset(
                    Constants.diceD20,
                    height: 45.sp,
                    width: 45.sp,
                    colorFilter:
                        const ColorFilter.mode(Colors.white, BlendMode.srcIn),
                  ),
                  label: "",
                ),
                BottomNavigationBarItem(
                  icon: SvgPicture.asset(
                    Constants.compas,
                    height: 45.sp,
                    width: 40.sp,
                    colorFilter:
                        const ColorFilter.mode(Colors.white, BlendMode.srcIn),
                  ),
                  label: "",
                  backgroundColor: Colors.red,
                ),
                BottomNavigationBarItem(
                  icon: SvgPicture.asset(
                    Constants.avatar,
                    height: 45.sp,
                    width: 45.sp,
                    colorFilter:
                        const ColorFilter.mode(Colors.white, BlendMode.srcIn),
                  ),
                  label: "",
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

But a behavior when i click from the Icon 0 to Icon 2 is triggering Icon 1 (same from the Icon 2 to 0). When i do it with jumpToPage it works just fine but would like to have a smooth animations of pages changing. Video:

I want to stop Icon 2 from triggering. I use pageController.animateToPage(...). Know someone how to fix this issue?