Bottom tabs and screen not touchable - react-native

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>