Organize screen/group structure in react navigation v6

Question

I am trying to migrate an old react navigation v4 to v6 (more than 100 routes). But I am facing to how to find the best structure to split group of screens in separate file/component.

I have tried this, to move out modals:

const ModalGroup = () => (
  <Stack.Group screenOptions={{ presentation: "modal" }}>
    <Stack.Screen name="ModalA" component={ModalAScreen} />
    <Stack.Screen name="ModalB" component={ModalBScreen} />
  </Stack.Group>
);

export const RootNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <ModalGroup />
  </Stack.Navigator>
);

But is not allowed at runtime with this error:

Error: A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found 'ModalGroup'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.

But this is working (but look ugly for me):

export const RootNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    {ModalGroup()}
  </Stack.Navigator>
);

So what is the best way to structure/organize group of screens in separate files to avoid creating a huge root navigator with all configuration & import ?

Ermaermanno