Glitchy navigation when navigating to a stack screen in a different tab of material bottom navigation

As mentioned in the title, I have nested navigation stacks in my application as follow

const MainStackNavigation: React.FC = () => {  return (<Stack.Navigator      initialRouteName="ScreenZero"      headerMode="screen"><Stack.Screen        name="BottomStackNavigation"        component={BottomStackNavigation}      /><Stack.Screen        name="ScreenZero"        component={ScreenZero}      /></Stack.Navigator>  );};

const BottomNavigation: FC = () => {  return (<Tab.Navigator      initialRouteName="Home"      tabBarPosition="bottom"><Tab.Screen        name="Home"        component={HomeStack}      /><Tab.Screen        name="Setting"        component={SettingStack}      /></Tab.Navigator >  );};

const HomeStack: FC = () => {  return (<Stack.Navigator      initialRouteName="ScreenOne"><Stack.Screen name="ScreenOne" component={ScreenOne} /><Stack.Screen name="ScreenTwo" component={ScreenTwo} /></Stack.Navigator>  );};

const SettingStack: FC = () => {  return (<Stack.Navigator      initialRouteName="ScreenThree"><Stack.Screen name="ScreenThree" component={ScreenThree} /><Stack.Screen name="ScreenFour" component={ScreenFour} /></Stack.Navigator>  );};

Let's say if I'm in BottomNavigation -> SettingStack -> ScreenFour, and then I want to navigate to ScreenOne which is in the HomeStack. Instead of animating directly to ScreenOne, the application navigate first to HomeStack and then navigate to ScreenOne. So you can see we have this weird transition effect and it can get trippy to look at.

Is there any way I can do to make the transition more fluid? Putting the ScreenOne into HomeStack is not what I want because ScreenOne will be navigated from multiple screens in different stacks