Remove Extra scroll with react-navigation/bottom-tabs

Question

I made a very simple test application with React Native and react-navigation/bottom-tabs but there is a small extra scroll that appears when adding this bottom tab. See picture below. Is there any way to remove it ?

The code is the following:

App.tsx:

import React, {  } from 'react';  
import Page1 from './Page1';
import { NavigationContainer } from '@react-navigation/native';
import Page2 from './Page2';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


const Tab = createBottomTabNavigator();

  
const App = () => {
  return <NavigationContainer>
    <Tab.Navigator>
      <Tab.Screen name="Page1"  component={Page1} />
      <Tab.Screen name="Page2" component={Page2} />
    </Tab.Navigator>

  </NavigationContainer>
}

export default App

Page1.tsx:

import React, {  } from 'react';
import { Text } from "@react-native-material/core";

const Page1 = () => {
    return <Text>
        I am Page1 ! !!!
    </Text>
}

export default Page1

Page2.tsx:

import React, {  } from 'react';
import { Text } from "@react-native-material/core"

const Page2 = () => {
    return <Text>
        Page 2 is me !!!
    </Text>
}

export default Page2