TabBar not working properly Expo React Native

[UDsGitHub]

I cloned the repo to confirm whether something was just wrong with my environment... I still dont know what could be wrong with my environment, I am using the latest version of the package.

When I use the Tabs.Container by default and pass no props, it messes up when trying to render the tab labels... the default flex on the width doesnt work, and the TABBAR_HEIGHT doesnt work either. The only way I was able to make the tabbar look reasonable was my using custom labelStyles to make it look like the example you have on the repo for default.

I dont know if this is related to the fact that the repo isnt updated to use the latest expo sdk, but I am using the latest expo 54 and testing with expo go. I attached screenshots from my mobile IOS testing and android studio.
If you need more info please let me know

Also almost forgot to add, when testing on my mobile IOS, the scroll feature doesnt work with the header on the tab.container, it only worked on the android studio instance. but the tab label formatting is still messed up

import { SCREEN_WIDTH } from "@/constants/Style";
import React from "react";
import { StyleSheet, View } from "react-native";
import {
  MaterialTabBar,
  MaterialTabItem,
  Tabs,
} from "react-native-collapsible-tab-view";

type Props = {};

const Profile = (props: Props) => {
  return (
    <Tabs.Container
      renderHeader={() => (
        <View style={{ height: 200, backgroundColor: "red" }} />
      )}
      // renderTabBar={(props) => (
      //   <MaterialTabBar
      //     {...props}
      //     TabItemComponent={(props) => (
      //       <MaterialTabItem
      //         {...props}
      //         labelStyle={{
      //           width: SCREEN_WIDTH / 3,
      //           margin: 0,
      //           // backgroundColor: "#555",
      //         }}
      //       />
      //     )}
      //   />
      // )}
    >
      <Tabs.Tab name="taba" label={"TAB A"}>
        <Tabs.ScrollView>
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
          <View
            style={{ backgroundColor: "cyan", height: 100, marginBottom: 8 }}
          />
        </Tabs.ScrollView>
      </Tabs.Tab>
      <Tabs.Tab name="tabb" label="TAB B">
        <View style={{ backgroundColor: "green", flex: 1 }}></View>
      </Tabs.Tab>
      <Tabs.Tab name="tabc" label={"TAB C"}>
        <View style={{ backgroundColor: "blue", flex: 1 }}></View>
      </Tabs.Tab>
    </Tabs.Container>
  );
};

export default Profile;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});