Custom React Navigation Dark and Light themes not being applied to child components

Im having problems with passing custom light or dark themes from react-navigation. The new defined object items of a theme are not overwritten as shown below. My goal is to use custom dark and light themes that i can use in every component. But now only the default values are showing not the custom ones.

App.js:

import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';
import Navigation from './components/Navigation.js';

const App = () => {
  return (
    <AppearanceProvider>
      <Navigation />
    </AppearanceProvider>
  );
};

export default App;

Inside the Navigation component im using the navigationContainer to pass the theme prop based on light or dark theme. Navigation.js:

import React, { useState }  from 'react';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import Login from './screens/Login.js';

const Navigation = props => {
  
  //CUSTOM THEMES
  const MyTheme = {
     ...DefaultTheme,
     colors: {
      ...DefaultTheme.colors,
      background: '#b91c22',
      primary: 'rgb(255, 45, 85)',
     },
   };

   const MyThemeDark = {
     ...DarkTheme,
     colors: {
      ...DarkTheme.colors,
      background: 'green',
      primary: 'rgb(255, 45, 85)',
     },
   };

  //STATES
  const [darkApp, setDarkApp] = useState(false);

  //SET THE THEME
  const appTheme = darkApp ? MyThemeDark : MyTheme;

  //STYLE
  const headerStyle = {
    header: {
     display: 'flex',
     alignItems: 'center',
     height: 0,
    },
    title: {
     position: 'absolute',
     top: 0,
     fontWeight: '900',
     fontSize: 30,
     color: '#fff',
     alignSelf: 'center',
    },
  };

  return (
    <NavigationContainer theme={appTheme}>
      <Stack.Navigator headerMode='screen'>
        <Stack.Screen
          name='Login'
          component={Login}
          options={{
            headerStyle: headerStyle.header,
            headerTitleStyle: headerStyle.title,
            title: 'Login',
          }}
        />
      </Stact.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

Then for example i want to get the overwritten background color in a button component, so i use the useTheme option from react-navigation. But the background color is not overwritten the default one. I was expected that the background would have the color #b91c22 but instead it is showing rgb(240, 240, 240), what im i doing wrong here?

Example Button.js:

import React from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { useColorScheme } from 'react-native-appearance';
import { useTheme } from '@react-navigation/native';

const Button = props => {

  //PROPS
  const {} = props;

  //THEMES
  const { colors } = useTheme();
  let scheme = useColorScheme();

  return (
    <TouchableOpacity style={{ backgroundColor: colors.background }}>
       <Text>Im Button</Text>
    </TouchableOpacity>
  );
};

export default Button;