React native navigation nested stack error, could not find component

Question

I am trying to navigate to a nested stack, when I use navigation.push(AppRoutes.RescueMeLanding.Name) I get the error:

Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'RescueMeStackScreen'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

Any ideas?

const AppRoutes = {
  ....
   RescueMeLanding: {
    Name: 'RescueMeStackScreen',
    Label: 'Rescue Me',
    isProtected: true,
  },
....
};

RescueMeStackScreen:

const RescueMeStackScreen = () => {
return (
    <RescueMeStack.Navigator
        initialRouteName={AppRoutes.RescueMeLanding.Name}
    >
        <RescueMeStack.Screen
            name={AppRoutes.RescueMeLanding.Name}
            component={RescueMeLandingScreen}
            options={{ headerShown: false }}
        />
        <RescueMeStack.Screen
            name={AppRoutes.RescueMeMap.Name}
            component={RescueMeScreen}
            options={{ headerShown: false }}
        />
        ;
    </RescueMeStack.Navigator>
);

RootStackNavigator:

const RootStackNavigator = () => {
  return (
    <RootStack.Navigator
      initialRouteName={AppRoutes.LoginRegistration.Name}
      mode="modal"
    >
      ....
      <RootStack.Screen
        name={AppRoutes.RescueMeLanding.Name}
        component={RescueMeStackScreen}
        options={{
          title: AppRoutes.Register.Label,
          headerShown: false,
          animationEnabled: false,
        }}
      />
 ....
    </RootStack.Navigator>
  );