Hiding header in React Navigation prevents scrolling on web

I've searched all over for this, but can't figure out what's wrong. I'm using React Navigation and have a simple set of views that use a stack navigator to click through screens. I also have a nested navigator so I can present a modal. All of that works fine, but when I set headerMode="none", scrolling on web breaks. It still works fine on iOS.

Am I doing something obviously wrong here? Still new to React Native/React Navigation

here is my code:

type RootStackParamList = {
  LandingPage: undefined
  AirportPage: { airportID: string }
  SearchResults: undefined
}

const MainStack = createStackNavigator()
const RootStack = createStackNavigator<RootStackParamList>()

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen
        name="LandingPage"
        component={LandingPage}
        options={{ headerShown: false }}
      />
      <MainStack.Screen
        name="AirportPage"
        component={AirportPage}
      />
    </MainStack.Navigator>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <ErrorBoundary fallback={<Error />}>
        <RelayEnvironmentProvider environment={RelayEnvironment}>
          <NavigationContainer linking={linking} >
            <RootStack.Navigator mode="modal" headerMode="none" initialRouteName="LandingPage">
              <RootStack.Screen name="LandingPage" component={MainStackScreen} />
              <RootStack.Screen name="SearchResults" component={SearchResultsPage} />
            </RootStack.Navigator>
          </NavigationContainer>
        </RelayEnvironmentProvider>
      </ErrorBoundary>
      <StatusBar style="auto" />
    </View>
  )
}