How to refactor 'createSwitchNavigator' code in react-navigation-6?

Question

Below is the code which uses react-navigation version-4. But in version-6 createSwitchNavigator is completely removed. How do I refactor the below code to make it work? I do not want to use the react-native-compat package.

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AccountScreen from './src/screens/AccountScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import TrackListScreen from './src/screens/TrackListScreen';

const switchNavigator = createSwitchNavigator({
  loginFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen,
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen,
    }),
    TrackCreate: TrackCreateScreen,
    Account: AccountScreen,
  }),
});

export default createAppContainer(switchNavigator);

Answer 1

I am able to successfully refactor the code in react-navigation version-6. The complete code is available in sandbox.

App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import RootNavigator from "./src/routes/createRootNavigator";

export default function App() {
  return (
    <NavigationContainer>
      <RootNavigator></RootNavigator>
    </NavigationContainer>
  );
}
});

createRootNavigator.js

.
.
const loginFlowStack = createNativeStackNavigator();
const trackListStack = createNativeStackNavigator();
const mainFlowBottomTabNavigator = createBottomTabNavigator();

function trackListStackNavigator() {
  return (
    <trackListStack.Navigator>
      <trackListStack.Screen name="TrackList" component={TrackListScreen} />
      <trackListStack.Screen name="TrackDetail" component={TrackDetailScreen} />
    </trackListStack.Navigator>
  );
}

const RootNavigator = (signedIn = false) => {
  if (!signedIn) {
    return (
      <loginFlowStack.Navigator>
        <loginFlowStack.Screen name="SignUp" component={SignUpScreen} />
        <loginFlowStack.Screen name="SignIn" component={SignInScreen} />
      </loginFlowStack.Navigator>
    );
  } else {
    return (
      <mainFlowBottomTabNavigator.Navigator>
        <mainFlowBottomTabNavigator.Screen
          name="trackListStackNavigator"
          component={trackListStackNavigator}
          options={{ headerShown: false }}
        />
        <mainFlowBottomTabNavigator.Screen
          name="TrackCreate"
          component={TrackCreateScreen}
        />
        <mainFlowBottomTabNavigator.Screen
          name="Account"
          component={AccountScreen}
        />
      </mainFlowBottomTabNavigator.Navigator>
    );
  }
};
export default RootNavigator;