SafeareaProvider with SafeAreaView not working well with header

When I use "SafeAreaProvider" with React Header, It makes my header more large like I don't use SafeAreaView.

But also, I use SafeAreaView and when It make my header larger, there's a huge gap on top of my screen.

How to resolve that? Here's my screenshots: (I used black for my safeareaview, to show you whats the problem)

Here's my "Application.js" navigator.

return (
    <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : null}
        style={{ flex: 1 }}
    >
    <SafeAreaProvider>
      <NavigationContainer theme={NavigationTheme} ref={navigationRef}>
        <Stack.Navigator headerMode={'none'}>
          <Stack.Screen name="Startup" component={Loader} />
            <Stack.Screen
              name="Main"
              component={MainNavigator}
              options={{
                animationEnabled: false,
              }}
            />
            <Stack.Screen
              name="Auth"
              component={AuthNavigator}
              options={{
                animationEnabled: false,
              }}
            />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
    </KeyboardAvoidingView>
  )

And here's my "MainNavigator" navigator.

<SafeAreaView style={[Layout.fill, { backgroundColor: '#111' }]}>
  <StatusBar barStyle={darkMode ? 'light-content' : 'dark-content'} />
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeContainer}
      options={{
        animationEnabled: false,
      }}
    />
    <Stack.Screen
      name="Delivery"
      component={DeliveryContainer}
      options={{
        animationEnabled: false,
      }}
    />
  </Stack.Navigator>
</SafeAreaView>

What's wrong with that code? Why It gives huge gap top of my header?

When I use SafeAreaView instead of SafeAreaProvider, It works well. But I want to use different colors for different pages.