Начальный экран компонента не будет перенаправлен после обновления реакции-навигации с 4.x до 5.1

Question

react-navigation обновлено с 4.x до 5.x в моем приложении React Native 0.61. Есть довольно много изменений, которые могут сломаться в обновлении. Моя проблема в том, что после обновления начальный экран остается и не маршрутизируется даже после нажатия на него ссылки на компонент.

Вот часть зависимостей в package.json для react-navigation:

"@react-navigation/bottom-tabs": "^5.2.2",
"@react-navigation/native": "^5.1.0",
"@react-navigation/stack": "^5.2.1",

Вот мой App.js (извините, это немного сумбурно. Также уменьшите 3 вкладки до только один начальный экран). Первый загруженный компонент - это SplashScrren, который извлекает данные с локального диска. После этого App загружается. App имеет одну нижнюю вкладку Event. При нажатии на событие в списке загружается Chat, позволяющий пользователю общаться с другими пользователями.

import io from 'socket.io-client';
import GLOBAL from "./src/lib/global";
import SplashScreen from "./src/components/splashscreen/SplashScreen";
import globalContext from "./src/components/splashscreen/GlobalContext";
import { enableScreens } from 'react-native-screens';

enableScreens();

//import helper from "./src/lib/helper";

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//socket.io
const socket = io(GLOBAL.BASE_URL, {
    transports: ['websocket'],
    jsonp: false
  });
console.log("socket id in App.js : ", socket.id);

socket.on('disconnect', (reason) => {
  // ...
  if (reason === 'io server disconnect') {
    // the disconnection was initiated by the server, you need to reconnect manually
    socket.connect();
  }

});

const BTab = createBottomTabNavigator();
const Stack = createStackNavigator();

const EventStack = (data) => {
  console.log("data in eventStack : ", data);
  const EventWithSelf = (props) => (<Event {...props} myself={data.data.myself} grp_name={data.data.grp_name} token={data.data.result} group_id={data.data.group_id} alias={data.data.alias} grpmember_id={data.data.grpmember_id} role={data.data.role} device_id={data.data.device_id} />)
  const NewEventWithSelf = (props) => (<NewEvent {...props} myself={data.myself} token={data.result} role={data.role} group_id={data.group_id} grpmember_id={data.data.grpmember_id} device_id={data.data.device_id} />)
  const EditEventWithSelf = (props) => (<EditEvent {...props} myself={data.data.myself} token={data.data.result} device_id={data.data.device_id} role={data.data.role} />)
  const ChatWithSocket = (props) => (<Chat {...props} socket={socket} myself={data.data.myself} token={data.data.result} alias={data.data.alias} grpmember_id={data.data.grpmember_id} role={data.data.role} group_id={data.data.group_id} device_id={data.data.device_id}/>);
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="Event" 
        component={EventWithSelf} 
      />
      <Stack.Screen 
        name="New Event" 
        component={NewEventWithSelf} 
      />
      <Stack.Screen 
        name="Edit Event" 
        component={EditEventWithSelf} 
      />
      <Stack.Screen 
        name="Chat" 
        component={ChatWithSocket} 
      />
    </Stack.Navigator>
  );
};    

function AppScreen ({route, navigation}) {

  const authContext = React.createContext(null);
  const stateContext = React.createContext(null);
  const propsContext = React.createContext(null);
  console.log("route in AppScreen : ", route);
  const {data} = route.params;
  console.log("data in AppScreen : ", data);
  const [myself, setMyself] = useState(data.myself);
  const [result, setResult] = useState(data.result);
  const [group_id, setGroup_id] = useState(data.group_id);
  const [grpmember_id, setGrpmember_id] = useState(data.grpmember_id);
  const [role, setRole] = useState(data.role);
  const [alias, setAlias] = useState(data.alias);
  const [contact_id, setContact_id] = useState(data.contact_id);
  const [grp_name, setGrp_name] = useState(data.grp_name);
  const [device_id, setDevice_id] = useState(data.device_id);
  const [success, setSuccess] = useState(data.success);
  //
  const SignupWithDeviceId = (props) => (<Signup {...props} device_id={device_id} />);
  const Verif1WithDeviceId = (props) => (<Verif1 {...props} device_id={device_id} />);

  var data1 = {
    myself,
    result,
    group_id,
    grpmember_id,
    grp_name,
    role,
    alias,
    contact_id,
    device_id,
    success,
  };

  const Eventstack = (props) => (<EventStack {...props} data={data1}/>);
  const Groupstack = (props) => (<GroupStack {...props} data={data1}/>);
  const Contactstack = (props) => (<ContactStack {...props} data={data1}/>);

  updateGroup = (group_id1, grp_name1) => {
    setGroup_id(group_id1);
    setGrp_name(grp_name1);
  };

  updateToken = (result1) => {
    setResult(result1);
  };

  updateGrpmember = (grpmember_id1, alias1, role1, contact_id1) => {
    setGrpmember_id(grpmember_id1);
    setAlias(alias1);
    setRole(role1);
    setContact_id(contact_id1);
  };

  if (!data1.success || !result || !myself) {
    return (     
      <Stack.Navigator initialRouteName="Signup">
        <Stack.Screen name="Signup" component={SignupWithDeviceId} />
        <Stack.Screen name="Verif1" component={Verif1WithDeviceId} />
        <Stack.Screen name="SplashScreen" component={SplashScreen} options={{headerShown:false}}/>
      </Stack.Navigator>
    )
  };
  let authVal = {
    myself,
    result,  
    updateToken,  
  }
  let stateVal = {
    group_id,
    grp_name,
    role,
    alias,
    updateGroup,
    updateGrpmember,
  }
  let propsVal = {
    device_id,
  }
  return (
    <propsContext.Provider value={propsVal}>
      <authContext.Provider value={authVal}>
        <stateContext.Provider value={stateVal}>
        <BTab.Navigator>
            <BTab.Screen name="Event" component={Eventstack} />

        </BTab.Navigator>
        </stateContext.Provider>
      </authContext.Provider>
    </propsContext.Provider>

  );
};

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator InitialRouteName="Splash">
        <Stack.Screen name="Splash" component={SplashScreen} options={{headerShown:false}}/>
        <Stack.Screen name="App" component={AppScreen} options={{headerShown:false}} />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

Здесь компонент Event, загруженный изначально.

При нажатии test компонент Chat должен быть загружен, но не загружен, а экран остается неизменным. Хотя файл журнала действительно показывает, что код компонента Chat был выполнен. Что не так с моим react-navigation обновлением?