BottomNavigationBar - Flutter - Unselected items wrongly animated

Question

I am using a BottomNavigationBar with Lottie animations, I set an animation for each navigation item with activeIcon and icon parameters.

When I click on a navigation item, it animates correctly however, all the other items do their "off" animation. See video.

How can I prevent inactive nav items from animating when they weren't previously active.

BottomNavigationBar(
    currentIndex: navIndex ?? 0,
    onTap: (final index) {
      ref.read(bottomNavProvider.notifier).setAndPersistValue(index);
    },
    type: BottomNavigationBarType.fixed,
    elevation: 0,
    backgroundColor: Colors.transparent,
    showSelectedLabels: false,
    showUnselectedLabels: false,
    items: <BottomNavigationBarItem>[
      getNavItem('assets/anim/home.json', 'assets/anim/home_off.json', 'bottom_nav_home'),
      getNavItem('assets/anim/tasks.json', 'assets/anim/tasks_off.json', 'bottom_nav_tasks'),
      getNavItem('assets/anim/subjects.json', 'assets/anim/subjects_off.json', 'bottom_nav_reports'),
      getNavItem('assets/anim/profile.json', 'assets/anim/profile_off.json', 'bottom_nav_settings'),
    ],
  ),

  /////


  BottomNavigationBarItem getNavItem(final String assetOn, final String assetOff, final String label) {
return BottomNavigationBarItem(
  activeIcon: Lottie.asset(
    assetOn,
    width: 20,
    height: 20,
    repeat: false,
    frameRate: FrameRate.max,
  ),
  icon: Lottie.asset(
    assetOff,
    width: 20,
    height: 20,
    repeat: false,
    frameRate: FrameRate.max,
  ),
  label: tr(label),
);

}