Hero Animation not working in Children Routes of AutoRoute

Question

Hero widget are not working when navigating between shell routes using the AutoTabsRouter of auto_route ^7.8.3

Routes are defined like this:

@override
List<AutoRoute> get routes => [
  //Other Routes

  AutoRoute(
    page: MainRoute.page,
    children: [
      AutoRoute(
        initial: true,
        page: FeedRoute.page,
        children: [
          AutoRoute(
            initial: true,
            page: FeedHomeShellRoute.page,
          ),
          AutoRoute(
            page: FeedBrowseShellRoute.page,
          ),
        ],
      ),
      AutoRoute(
        page: NewGenerationsRoute.page,
      ),
      AutoRoute(
        page: ProfileRoute.page,
      ),
    ],
  ),

 //Other Routes
];

The AutoTabRouter is used like this:

AutoTabsRouter.tabBar(
  inheritNavigatorObservers: true,
  routes: const [
    FeedHomeShellRoute(),
    FeedBrowseShellRoute(),
  ],
  builder: //widget builder
),

The parent of this widget is another AutoTabsRouter, which handles separate tabs and routing.

The navigation is happening with navigate method in AutoTabsRouter, like this:

InkWell(
  onTap: () {
    AutoTabsRouter.of(context).navigate(const FeedBrowseShellRoute());
  },
  child: Hero(
    tag: "hero_tag",
    child: //The child Widget
  ),
),

The FeedBrowseShellView has it's own reciever Hero widget with same tag.

Here's the Screenshot video of the problem:

If anyone can share why this is happening, it would be very helpful. Thanks.