How to integrate createMaterialBottomTabNavigator with react-router v4

I'm trying to set a createMaterialBottomTabNavigator method from 'react-navigation-material-bottom-tabs' with react router v4. I'm having trouble wrapping my head around how to do that. It might be related to the fact that my project is written in typescript. I want to have the option to define routes in the bottom navigation, but also to have inner routes that are not set in the bottom navigation. for example, I want to have a bottom navigation with the following tabs: 1) Home 2) Profile

and within Profie, I want to access the route settings

Here is my stack navigator:

import {NavigationNativeContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import {StatusBar} from 'react-native';
import {Theme, withTheme} from 'react-native-paper';
import Main from './home/Main';
import Profile from './profile/Profile';
import Settings from './profile/Settings';

interface Props {
  theme: Theme;
}

const Stack = createStackNavigator();

function SignedInStack({theme}: Props) {
  return (
    <NavigationNativeContainer>
      <StatusBar
        backgroundColor={theme.colors.primary}
        barStyle="light-content"
      />
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: theme.colors.surface,
          },
          headerTintColor: '#000',
        }}>
        <Stack.Screen
          name="HomePage"
          component={Main}
          options={{
            title: '',
            header: null,
          }}
        />
        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{title: ''}}
        />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationNativeContainer>
  );
}

export default withTheme(SignedInStack);

I have tried replacing the code above with the default example in the documentation:

export default createMaterialBottomTabNavigator(
  {
    Home: { screen: Main },
    Profile: { screen: Profile }
  },
  {
    initialRouteName: 'Home',
    activeColor: '#f0edf6',
    inactiveColor: '#3e2465',
    barStyle: { backgroundColor: '#694fad' },
  }
);

I'm getting

 Error: Unable to resolve module `react-navigation` from `node_modules/react-navigation-material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx`: react-navigation could not be found within the project.

Please explain how to go about setting this bottom navigation with react-router.