Bottom tabs and screen not touchable

Question

I have a project that has stack and tab navigation in it. There is a strange problem it in which is: The tabs and screens are not touchable sometimes, although the screen is always scrollable is there is any ScrollView in that screen.

Note: The project was running fine for last 2 years but I recently(last month) migrated from mac intel to mac m1 chip using migration assistant. This problem started appearing from the last week.

The Structure of the Project:

• The Screen MainScreen is imported and called in app.js
• MainScreen checks for the token and calls MainNavigation, which is another screen
• In MainNavigation I have 4 tabs like <Tab.Screen name="Dashboard" component={DashboardStack}/>
• Used import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
• Then there are 4 other screens each one for one tab like: DashboardStack
• Used import {createStackNavigator} from '@react-navigation/stack'
• And inside DashboardStack file, I have all the files that will be for Dashboard

Package.json

"react": "16.13.1",
"react-native": "0.63.4",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"react-native-safe-area-context": "^3.4.1",
"react-native-screens": "^2.16.1",

MainNavigation screen

function DashboardStack({navigation, route}) {
    return <DashboardNavigation navigation={navigation} route={route} driverId={driverId} globalSettings={props.globalSettings} handleLogout={props.handleLogout}/>
  }
return(
<NavigationContainer>
      <Tab.Navigator tabBarOptions={{ showLabel: false, style:{bottom:5}}}
        screenOptions={({route}) => ({tabBarIcon: ({focused}) => handleNavIcon(route.name, focused)})}
        >
        <Tab.Screen name="Dashboard" component={DashboardStack}/> 
        <Tab.Screen name="Billing" component={BillingStack} />
        <Tab.Screen name="Rental" component={RentalStack} />
        <Tab.Screen name="Support" component={SupportStack} />
        <Tab.Screen name="Account" component={AccountStack} />
      </Tab.Navigator>
    </NavigationContainer>
)

DashboardNavigation.js

<DashboardStack.Navigator options={{ headerShown: true, }} screenOptions={{ headerBackTitleVisible: false, headerTitleAlign: "center", headerRight: () => <NotificationIcon driverId={props && props.driverId && props.driverId} navigation={props.navigation}/> }}>
          <DashboardStack.Screen name="Dashboard" children={() => <Dashboard driverId={props.driverId} globalSettings={props.globalSettings} handleLogout={props.handleLogout} />} /> 
          <DashboardStack.Screen name="Current Documents" component={carDocs} options={{ headerBackImage: () => <MaterialIcons size={Platform.OS == "ios" ? 30 : 25} name="arrow-back" style={{ paddingLeft: 10 }} /> }}></DashboardStack.Screen>
          <DashboardStack.Screen name="Notifications" component={NotificationListScreen} options={{ headerBackImage: () => <MaterialIcons size={Platform.OS == "ios" ? 30 : 25} name="arrow-back" style={{ paddingLeft: 10 }} /> }}></DashboardStack.Screen>
          <DashboardStack.Screen name="Notification Detail" component={NotificationDetailScreen} options={{ headerBackImage: () => <MaterialIcons size={Platform.OS == "ios" ? 30 : 25} name="arrow-back" style={{ paddingLeft: 10 }} /> }}></DashboardStack.Screen>
          <DashboardStack.Screen name="Under Construction" component={ComingSoon} options={{ headerBackImage: () => <MaterialIcons size={Platform.OS == "ios" ? 30 : 25} name="arrow-back" style={{ paddingLeft: 10 }} /> }}></DashboardStack.Screen>
          <DashboardStack.Screen name="Make a Payment" component={makePayment} options={{ headerBackImage: () => <MaterialIcons size={30} name="arrow-back" style={{ paddingLeft: 10 }} /> }}></DashboardStack.Screen>
          <DashboardStack.Screen name="Verify Phone Number" component={VerifyPhoneNumber} options={{ headerBackImage: () => <MaterialIcons size={30} name="arrow-back" style={{ paddingLeft: 10 }} /> }}></DashboardStack.Screen>
        </DashboardStack.Navigator>