weird behavior with scrollbar when navigating in nested navigators on iOS

Current behavior

Hey there,

I am trying to navigate within nested navigators. I have a tabless screen and some nested stack and tab navigators.
When I navigate from the tabless screen to a nested screen my scrollbar is in the middle of the screen on iOS.
You can also see that the transition for switching the screen behaves weirdly, like coming from both sides.
I don't know if it is a bug or if I am navigating wrong, so I would appreciate some help.
Here is a video and my snack, so you can reproduce the issue.

https://user-images.githubusercontent.com/86783532/124126293-d20f1080-da7a-11eb-85a9-377be2676a3d.mov

import * as React from 'react';
import { Text, View, StyleSheet, Button, ScrollView } from 'react-native';
import Constants from 'expo-constants';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Stack = createStackNavigator();
const Stack2 = createStackNavigator();
const Stack3 = createStackNavigator();
const Tab = createBottomTabNavigator();

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

const HomeScreen = () => {
  return <Text style={styles.margin}>HomeScreen</Text>;
};

const ProfileScreen = ({ navigation }) => {
  return (
    <ScrollView>
      <View
        style={{ height: 2000, width: '100%', backgroundColor: 'grey' }}></View>
    </ScrollView>
  );
};

const ChatOverview = ({ navigation }) => {
  return (
    <>
      <Text style={styles.margin}>ChatOverview</Text>
      <Button
        onPress={() => navigation.navigate('Tabless')}
        title="to go tabless"
      />
    </>
  );
};

const HomeNavigator = () => {
  return (
    <Stack2.Navigator initalRouteName="HomeScreen">
      <Stack2.Screen
        name="HomeScreen"
        options={{ headerShown: false }}
        component={HomeScreen}
      />
      <Stack2.Screen
        name="ProfileScreen"
        options={{ headerShown: false }}
        component={ProfileScreen}
      />
    </Stack2.Navigator>
  );
};

const ChatNavigator = () => {
  return (
    <Stack3.Navigator>
      <Stack3.Screen name="ChatOverview" component={ChatOverview} />
    </Stack3.Navigator>
  );
};

const HomeTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeNavigator} />
      <Tab.Screen name="Chat" component={ChatNavigator} />
    </Tab.Navigator>
  );
};

const Tabless = ({ navigation }) => {
  return (
    <Button
      style={styles.margin}
      title="go to profile"
      onPress={() =>
        navigation.navigate('HomeTabs', {
          screen: 'Home',
          params: { screen: 'ProfileScreen' },
        })
      }
    />
  );
};

const StackNavigator = ({ navigator }) => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="HomeTabs"
        options={{ headerShown: false }}
        component={HomeTabs}
      />
      <Stack.Screen name="Tabless" component={Tabless} />
    </Stack.Navigator>
  );
};

const styles = StyleSheet.create({
  margin: {
    margin: 20,
  },
});

Expected behavior

The scrollbar should be on the right and not in the middle. The navigation transition should be normal like navigation.navigate()

Reproduction

https://snack.expo.io/s9oQc1YX3

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack

Environment

Start by running the linked Snack on iOS and reproducing the transition from Tabless through HomeTabs and HomeNavigator to ProfileScreen. Trace the nested stack and bottom-tab navigation behavior around that route; done means the scrollbar is at the right edge and the transition behaves like a normal navigation.navigate() transition.