Flutter app text turning to white when I set usematerial3: true in MaterialApp

I got excited when I was knowing that Google have introduced Material 3 for flutter apps. This means we can design Flutter Apps with Material 3 design, but when I code a UI for testing Material 3, whole texts and Icons colour share the same colour as the background colour in my App which means they're all white, example from screenshot:

This is what I'm expecting about (I colored the text and icon for example):

Anyone ever face this problem?

This is my main.dart "MaterialApp" code:

MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            useMaterial3: true,
          ),
          routes: AppRoute.routes,
          initialRoute: AppRoute.mainPageRoute,
        ),

and this is my tab code:

TabBar(
          tabs: const [
            Tab(
              icon: Icon(Icons.chrome_reader_mode),
              text: "List Hadits",
            ),
            Tab(
              icon: Icon(Icons.search),
              text: "Search Books",
            ),
          ],
          controller: _controller,
        ),

UDPDATE: Also, I'm using material theme builder for defining my colour scheme:

ThemeData(
            useMaterial3: true,
            colorScheme: lightColorScheme,
          ),
          darkTheme: ThemeData(
            useMaterial3: true,
            colorScheme: darkColorScheme,
          ),