Flutter – Go_router child routes with parameters

I try to use go_router package
and this is my reouter confiegration

GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      name: 'home',
      builder: (context, state) => const Homepage(),
      routes: <RouteBase>[
        GoRoute(
          path: 'reciters',
          name: 'reciters',
          builder: (context, state) => const RecitersScreen(),
          routes: <RouteBase>[
            GoRoute(
              path: 'reciter-details',
              name: 'reciter-details',
              builder: (context, GoRouterState reciterState) {
                final reciter = reciterState.extra;
                return ReciterScreen(reciter: reciter as Reciter);
              },
              routes: [
                GoRoute(
                  path: 'add-to-playlist',
                  name: 'add-to-playlist',
                  builder: (context, state) {
                    PlaylistItem playlistItem = state.extra as PlaylistItem;
                    return AddToPlayListScreen(
                      playlistItem: playlistItem,
                    );
                  },
                ),
                GoRoute(
                  path: 'audio-player',
                  name: 'audio-player',
                  builder: (context, state) {
                    return const AudioPlayerScreen();
                  },
                )
              ],
            ),
            GoRoute(
              path: 'reciters-filter',
              name: 'reciters-filter',
              builder: (context, state) => const FilterScreen(),
            ),
          ],
        ),
        GoRoute(
          path: 'holy-quran',
          name: 'holy-quran',
          builder: (context, state) => const HolyQuranScreen(),
        ),
        GoRoute(
          path: 'tafasir',
          name: 'tafasir',
          builder: (context, state) => const TafasirScreen(),
        ),
        GoRoute(
          path: 'ramadan-calender',
          name: 'ramadan-calender',
          builder: (context, state) => const RamadanCalenderScreen(),
        ),
        GoRoute(
          path: 'qibla',
          name: 'qibla',
          builder: (context, state) => const QiblaScreen(),
        ),
        GoRoute(
          path: 'prayer-times-2',
          name: 'prayer-times-2',
          builder: (context, state) => const PrayerTimesMethod2Screen(),
        ),
        GoRoute(
          path: 'mosques',
          name: 'mosques',
          builder: (context, state) => const NearbyMosquesScreen(),
        ),
        GoRoute(
          path: 'videos',
          name: 'videos',
          builder: (context, state) => const VediosScreen(),
        ),
        GoRoute(
          path: 'radio',
          name: 'radio',
          builder: (context, state) => const RadioScreen(),
        )
      ],
    ),
  ],
);

When I navigate to reciters screen with this

context.goNamed('reciters');

Then naviagate to reciter screen details

context.goNamed(
        'reciter-details',
        extra: reciter,
      );

for here my code is working fine but when I try to navigate to child screen add-to-playlist

context.goNamed(
      'add-to-playlist',
      extra: playlistItem,
    );

I get this error
type ‘PlaylistItem’ is not a subtype of type ‘Reciter’ in type cast
any help