How should I structure a deep linking config object to work with these navigators?

Question

Given the following navigator hierarchy, what is the correct way to structure the linking config object? As currently constructed, when trying to open 'myapp://bizpage/1', I get this error:

The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.

I followed the documentation and attacked google all evening. I don't see where I am going wrong here.

Can someone point me in the right direction?

function AppNav({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="AuthFlow"
        component={AuthFlow}
      />
      <Stack.Screen
        name="DrawerNav"
        component={DrawerNav}
      />
    </Stack.Navigator>
  );
}

function AuthFlow({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Login"
        component={Login}
      />
      <Stack.Screen
        name="Signup"
        component={Signup}
      />
    </Stack.Navigator>
  );
}

function DrawerNav({navigation}) {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={Main}
      />
      <Drawer.Screen
        name="Profile"
        component={Profile}
      />
      <Drawer.Screen
        name="Notifications"
        component={NotificationsScreen}
      />
      </Drawer.Navigator>
  );
}

function Main({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
      <Stack.Screen
        name="BizPage"
        component={BizPage}
      />
      <Stack.Screen
        name="PeerProfile"
        component={PeerProfile}
      /> 
    </Stack.Navigator>
  );
}

const App = props => {
const linking = {
    prefixes: ['https://myapp.com', 'myapp://'],
    config: {
      screens: {
        AppNav: {
          screens: {
            DrawerNav: {
              screens: {
                Home: {
                  screens: {
                    BizPage: {
                      path: 'bizpage/:id',
                      parse: {id: Number},
                    },
                    PeerProfile: {path: 'peerprofile/:id', parse: {id: Number}},
                  },
                },
              },
            },
          },
        },
      },
    },
  };

  return (
    <Provider store={store}>
      <NavigationContainer
        linking={linking}
        theme={DarkTheme}
        fallback={<Text>Loading...</Text>}>
        <AppNav></AppNav>
      </NavigationContainer>
    </Provider>
  );
};

Sufficiency

Answer 1

You don't have a screen named AppNav. It's a component. The linking configuration should only contain screen names.

The screen that should be under config is DrawerNav

config: {
  screens: {
    DrawerNav: {
      // ...

Plugboard