Using Device Preview runs all of my initState twice

[manandharsudhir]

Here is my main Code

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferencesImp.init();

  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  ApiConstants.url = "my api";
  runApp(
    DevicePreview(
      enabled: true,
      builder: (context) => ProviderScope(child: const MyApp()),
    ),
  );
}

here is my MyApp code

final appRouter = AppRouter();

class MyApp extends HookConsumerWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp.router(
      routerDelegate: appRouter.delegate(),
      routeInformationParser: appRouter.defaultRouteParser(),
      title: AppStrings.appname,
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [],
      builder: (context, widget) {
        widget = ResponsiveBreakpoints.builder(
          child: DevicePreview.appBuilder(context, widget),
          breakpoints: const [
            Breakpoint(start: 0, end: 450, name: MOBILE),
            Breakpoint(start: 451, end: 800, name: TABLET),
            Breakpoint(start: 801, end: 1920, name: DESKTOP),
            Breakpoint(start: 1921, end: double.infinity, name: '4K'),
          ],
        );
        return widget;
      },
    );
  }
}

now when i run init state on any of my screen the function is being called twice.