Combining DrawerNavigator and TabsNavigator without "nesting" in React Native

I'm working on a react native project where I want to be able to use the TabsNavigator along with DrawerNavigator at the same time. I know that nesting navigators accomplishes this but not exactly in the way I want. Nesting navigators will for instance only contain the TabsNavigator in one screen of DrawerNavigator or the opposite, depending on which navigator you nest inside the other. But I want the tabsNavigator and the drawerNavigator to always be visable, no matter what screen you're in.

I also want the navigators to use the same screens and not create new ones with the same name. For instance, if tabsNavigator contains the screen Reminders, then drawerNavigator should also contain that screen. But if I'm correct when you declare <Tabs.screen> or <Drawer.screen> with the same name and the same component, this creates two separate screens even if they're using the same component.

Example tabsNavigator:

const Tabs = createMaterialTopTabNavigator();
const TabsNavigator = ( navigation ) => {
  return (
    <Tabs.Navigator>
        <Tabs.Screen name="Calendar" component={Calendar} />
        <Tabs.Screen name="Reminders" component={Reminders} /> 
        <Tabs.Screen name="Weather" component={Weather}  />
    </Tabs.Navigator>
    );
};
export default TabsNavigator;

Example drawerNavigator:

const Drawer = createDrawerNavigator();
function DrawerNavigator() {
  return (
    <Drawer.Navigator>
        <Drawer.Screen name="Calendar" component={Calendar} />
        <Drawer.Screen name="Reminders" component={Reminders} /> 
        <Drawer.Screen name="Weather" component={Weather}  />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator 

and now in app.js I would like to do:

export default function App() {
  return (
    <NavigationContainer>
       <TabsNavigator />
       <DrawerNavigator />
    </NavigationContainer>
  );
}

But above code will return the following error:

Error: Another navigator is already registered for this container

And that is understandable since you can't have multiple navigators inside one <NavigationContainer>, hence the use of nesting navigators inside each other, however as I mentioned nesting navigators (which I have already tried) doesn't allow the use of both navigators simultaneously for all screens. There has to be a better way to accomplish this right?

Any help would be much appreciated!

Source:

https://reactnavigation.org/docs/drawer-based-navigation/

https://reactnavigation.org/docs/material-top-tab-navigator/

https://reactnavigation.org/docs/nesting-navigators/

Ps. I noticed this is a duplicate of Combine TabNavigator and Drawernavigator but since that post is old and has not yet been answered, I'd like to give this another shot.