I'm currently learning to work with React Native, and I'm a little stuck on the topic of navigation between pages. Specifically, I'm currently figuring out the "Top Tab Navigator". As you can see in the image, I created 3 navigation items "Statistics", "Achivements" and "Challenges", and each of them has corresponding components. According to my idea, when a user enters, for example, the "Statistics" page, the application should display the inscription "Statistics Screen". And by the same logic, all other pages should work. But for some reason, the 'Statistics' page displays the contents of the 'Challanges' page, and the other two pages are not displayed at all. And the strangest thing is that this is only on IOS, which is where I'm currently working. Just for the sake of an experiment, I ran the same code, without the slightest changes, on Android and everything works correctly there, as I wanted. Tell me, what could this be connected with?

[enter image description here](.png)
[enter image description here](.png)
[enter image description here](.png)

I've tried a lot of things already. Tried using "SafeAreaView", tried deleting and reinstalling expo, tried reinstalling dependencies, updated all packages and technologies that I used in the project, changed the phone versions in the simulator (starting from iPhone 15 and ending with iPhone 15 Pro Max), even asked ChatGPT to help, but still nothing helps.

Just in case, here is my 'TopTap' file code:

    import React from "react";
    import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
    import Statistics from "../screens/Statistics"
    import Achievements from "../screens/Achievements";
    import Challenges from "../screens/Challenges";
    import { StyleSheet } from "react-native";
    import { SafeAreaView } from "react-native-safe-area-context";
       
    const Tab = createMaterialTopTabNavigator();
    
    const TopTap = () => {
      return (
        <SafeAreaView style={styles.container}>
          <Tab.Navigator
            initialRouteName="Statistics"
            screenOptions={{
              swipeEnabled: true,
              animationEnabled: false,
              lazy: true,
              tabBarIndicatorStyle: { backgroundColor: "blue" },
              tabBarStyle: {
                elevation: 0,
                shadowOpacity: 0,
              },
            }}
          >
            <Tab.Screen name="Statistics" component={Statistics} />
            <Tab.Screen name="Achievements" component={Achievements} />
            <Tab.Screen name="Challenges" component={Challenges} />
          </Tab.Navigator>
        </SafeAreaView>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        margin: 10,
      },
    });
    export default TopTap;