Need help with react native/ routing

I’m getting an error when trying to nest a drawer navigator in a switchNavigator in react navigation.
Here is the error.

Here is the relevant code.

import {createSwitchNavigator, createAppContainer} from "react-navigation"
import SideBar from "../App/Components/SideBar"
import createDrawerNavigator from "react-navigation-drawer";

//Components
import Login from "../App/Views/Login"
import Categories from "../App/Views/Categories"
import UserProfile from "../App/Views/UserProfile"


const BataDrawerNagivator = createDrawerNavigator({
  Dashboard: {screen: SideBar }
});

const BataNavigator = createSwitchNavigator({
    LoginScreen: Login,
    CategoriesScreen: Categories,
    UserProfileScreen: UserProfile,
    Dashboard:{ screen: BataDrawerNagivator}
  });


  export default createAppContainer(BataNavigator);

I’ve read through multiple resources online that have this same error but all of the answers seem to be referring to a deprecated dependency which I don’t think is the case here.

What’s interesting is each navigation works fine individually but as soon as I try to nest them it throws this err.