TabBar obstruct AppBar main body

I have a reusuable AppBar Widget that I used all across my app. It works fine most of the time until When I add a tabBar in AppBar bottom. The TabBar would go up and block most of the AppBar. I don't know how to fix this.

This is what it looks like without adding a TabBar

When I add a tabBar it looks like this

My Code for the AppBar

class MySearchBar extends StatefulWidget implements PreferredSizeWidget {
  final List<Widget> additional;
  final BuildContext? myContext;
  final PreferredSizeWidget? bottom;
  const MySearchBar({Key? key, this.bottom, this.additional = const [], this.myContext}) : super(key: key);

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  _MySearchBarState createState() => _MySearchBarState();
}

class _MySearchBarState extends State<MySearchBar> {

  var authRef = Get.find<AuthController>();
  var cartRef = Get.find<CartController>();
  int amount = 0;
  List<Widget> orig = [];

  @override
  void initState() {
    super.initState();

     orig.add(
  //Some Kind of widget here for actions
);
if (widget.additional.isNotEmpty) {
      orig.addAll(widget.additional);
    } else {
      orig.add(SizedBox(
        width: 5,
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: (widget.myContext!=null)? IconButton(onPressed: (){
        Navigator.of(widget.myContext!, rootNavigator: true).pop(widget.myContext);
      }, icon: Icon(Icons.arrow_back)): null,
      backwardsCompatibility: false,
      title: InkWell(
        child: Container(
          margin: EdgeInsets.all(10),
          width: Get.width * 0.7,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: InkWell(
            child: MyTextField(
              enable: false,
              border: InputBorder.none,
              prefixIcon: Icon(Icons.search),
              label: "Search Something".tr,
            ),
          ),
        ),
        onTap: () {
          pushNewScreen(context, screen: SearchScreen(), withNavBar: false);
        },
      ),
      actions: orig,
      bottom: widget.bottom,
    );
  }
}

The screen where I used TabBar

class FollowerAndFollowingScreenMain extends StatefulWidget {
  final bool follower;
  final String id;

  const FollowerAndFollowingScreenMain(
      {Key? key, required this.id, required this.follower})
      : super(key: key);

  @override
  _FollowerAndFollowingScreenMainState createState() =>
      _FollowerAndFollowingScreenMainState();
}

class _FollowerAndFollowingScreenMainState extends State<FollowerAndFollowingScreenMain> {

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      initialIndex: (widget.follower) ? 0 : 1,
      child: Scaffold(
        appBar: MySearchBar(
          myContext: context,
          bottom: TabBar(
            tabs: [
              Tab(
                text: "Following".tr,
              ),
              Tab(
                text: "Followers".tr,
              ),
            ],
          ),
        ),
        body: _myBody(),
      ),
    );
  }

  _myBody() {
    return TabBarView(children: [
      FollowingAndFollowersScreen(
        followers: true,
        id: widget.id,
      ),
      FollowingAndFollowersScreen(
        followers: false,
        id: widget.id,
      ),
    ]);
  }
}