React-Navigation: How to implement multi-independant viewstacks with react-navigation (React-Native) - react-native

Question

Good morning, good afternoon or good evening
I want to archive this navigation interface (for desktop / tablet screen size):
https://photos.app.goo.gl/ZEna1uozQP1UnVWm6
Each viewstack should be fully dependent to only one navigation; I am using react-navigation.
However, with my following code, the the pane view (the card) is completely hidden / gone on the main page.
How should I do this in order to archive the results on the prototype / video.
Below are my codes.
Thank you!
App.js (Main navigation)
import React, { FC } from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { ThemeProvider } from '#emotion/react';
import setTheme from '#lib/theme';
import changeNavigationBarColor from 'react-native-navigation-bar-color';
import {
Home as Billing,
Customers,
} from '#components/5-pages';
const theme = setTheme('light');
const Stack = createStackNavigator();
changeNavigationBarColor("black", false, true);
type Props = {};
const App: FC<Props> = ({...props}) => {
return (
<ThemeProvider theme={theme}>
<NavigationContainer>
<Stack.Navigator initialRouteName={"billing"} screenOptions={{ headerShown: false }}>
<Stack.Screen name="billing" component={ Billing } />
<Stack.Screen name="customers" component={ Customers } />
</Stack.Navigator>
</NavigationContainer>
</ThemeProvider>
);
};
export default App;
Card.js (Pane / Inner navigation)
import React, { FC }from 'react';
import styled from '#emotion/native';
import Text from './Text';
import setTheme from '#lib/theme';
import { NavigationContainer, useNavigation } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { ThemeProvider } from '#emotion/react';
const Container = styled.View`
background: ${({ theme }: any) => theme.colors.white };
border-radius: 6px;
flex-direction: column;
padding: 6px 12px;
margin: 6px 12px;
width: 320px;
`;
const Content = styled.View`
align-items: center;
flex-direction: column;
padding-left: 6px;
`;
const Title = styled(Text)`
font-size: 15px;
font-weight: bold;
color: #404040;
line-height: 49px;
`;
const Stack = createStackNavigator();
const theme = setTheme('light');
const Card: FC<Props> = ({ children, modal, title, ...props }) => {
const List : FC<Props>= () => {
const navigation = useNavigation();
return (
<Container {...props} >
<Title>{title}</Title>
<Content onModal={()=>{navigation.push("modal", props)}}>
{children}
</Content>
</Container>
)};
const Modal : FC<Props>= () => {
return (
<Container {...props} >
<Title>{title}</Title>
<Content>
{modal}
</Content>
</Container>
)};
return (
<NavigationContainer independent={true}>
<Stack.Navigator initialRouteName={"list"} screenOptions={{ headerShown: false }}>
<Stack.Screen name="list" component={ List } />
<Stack.Screen name="modal" component={ Modal } />
</Stack.Navigator>
</NavigationContainer>
);
}
type Props = {
title?: string;
children?: React.ReactNode;
modal?: React.ReactNode;
};
export default Card;