Menu Item throwing error on React native Paper

Question

I am trying to add header right navigation to my header options and below is my code

App.js

  import { MD3LightTheme as DefaultTheme,PaperProvider } from 'react-native-paper';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  import  HomeScreen  from './screens/Home/index';
  import RegisterScreen  from './screens/Register/index';
  import ForgotPasswordScreen from './screens/ForgotPassword';
  import SetPasswordScreen from './screens/SetPassword';
  import DashboardScreen from './screens/Dashboard';
  import HeaderMenu from './components/HeaderMenu';



  const Stack = createNativeStackNavigator();

  const theme = {
    ...DefaultTheme,
    // Specify custom property
    myOwnProperty: true,
      ...DefaultTheme.colors,
    // Specify custom property in nested object
    colors: {
      error: '#B22D1D',
      primary: '#0a4b7c',
      success: '#357a38'
    },
  };

  const headerMenuOptions = {
    headerRight: () => ( <HeaderMenu /> )}

  export default function App() {
    return (
      <PaperProvider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" options={{headerShown:false}} component={HomeScreen} />
          <Stack.Screen name="Register" component={RegisterScreen} />
          <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
          <Stack.Screen name="SetPassword" component={SetPasswordScreen} />
          <Stack.Screen name="Dashboard" options={headerMenuOptions}  component={DashboardScreen} />
        </Stack.Navigator>
      </NavigationContainer>
      </PaperProvider>
    );
  }

HeaderMenu.js

    import * as React from "react";
    import { View } from "react-native";
    import { Button, Menu, Divider, PaperProvider } from "react-native-paper";

    function HeaderMenu() {
    const [visible, setVisible] = React.useState(true);

    const openMenu = () => setVisible(true);

    const closeMenu = () => setVisible(false);

    return (
        <View
        style={{
        
        }}
        >
        <Menu
            visible={visible}
            onDismiss={closeMenu}
            anchor={<Button onPress={openMenu}>Show menu</Button>}
        >
            <Menu.Item onPress={() => {}} title="Item 1" />
            <Menu.Item onPress={() => {}} title="Item 2" />
            <Divider />
            <Menu.Item onPress={() => {}} title="Item 3" />
        </Menu>
        </View>
    );
    };

    export default HeaderMenu;

Copied from https://callstack.github.io/react-native-paper/docs/components/Menu/

I am getting below error

             ERROR  TypeError: Cannot read property 'level2' of undefined

This error is located at:
    in Menu
    in ThemedComponent (created by withTheme(Menu))
    in withTheme(Menu) (created by HeaderMenu)
    in RCTView (created by View)
    in View (created by HeaderMenu)
    in HeaderMenu (created by HeaderConfig)
    in RNSScreenStackHeaderSubview (created by ScreenStackHeaderRightView)
    in ScreenStackHeaderRightView (created by HeaderConfig)
    in RNSScreenStackHeaderConfig (created by HeaderConfig)
    in HeaderConfig (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in ThemeProvider (created by PaperProvider)
    in RCTView (created by View)
    in View (created by Portal.Host)
    in Portal.Host (created by PaperProvider)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by PaperProvider)
    in PaperProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
WARN  Possible Unhandled Promise Rejection (id: 7):
TypeError: Cannot read property 'level2' of undefined
TypeError: Cannot read property 'level2' of undefined

I did not try anything new, just copy pasted the code. It is expected to work. I am a newbie to react native paper, so let me know what am I missing out.

Answer 1

there is missing ...DefaultTheme.colors inside colors object

const theme = {
    ...DefaultTheme,
    // Specify custom property
    myOwnProperty: true,
    // Specify custom property in nested object
    colors: {
       ...DefaultTheme.colors,
      error: '#B22D1D',
      primary: '#0a4b7c',
      success: '#357a38'
    },
  };