react-native-animated-nav-tab-bar: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer' ?

Hello! I am trying to use this but this is the error I get: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer' ?

Here is my code for my TabNavigator:

import React from "react";
import routes from "./routes";
import {View, Text, TouchableOpacity, Dimensions, StyleSheet, Image} from 'react-native'
import HomeButton from "./HomeButton";
import CardsScreen from "../screens/CardsScreen";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import AccountNavigator from "./AccountNavigator";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import defaultStyles from "../config/defaultStyles";
import HomeNavigator from "./HomeNavigator";
import { Feather } from '@expo/vector-icons'; 
import { FontAwesome5 } from '@expo/vector-icons'; 
import { MaterialIcons } from '@expo/vector-icons'; 
import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";

const Tab = AnimatedTabBarNavigator();
const window = Dimensions.get("window")

const CustomTabBar = ({state, descriptors, navigation}) => {
  let button;
  return(
    <View style={styles.bottomContainer}>
      {state.routes.map((route, index) => {
        const clicked = state.index === index;
        {route.name==="Home" ? button=
        <TouchableOpacity key={route.name}  onPress={()=>{
          if (!clicked) {
            navigation.navigate(route.name);
          }
        }} 
        style={{flex: 1}}
        accessibilityRole="button"
        accessibilityState={clicked ? { selected: true } : {}}
        delayPressIn={0}
        >
            <View style={styles.homeButton}>
              <Feather name="home" size={35} color="white" /> 
            </View>
        </TouchableOpacity> 
        : 
        button=
        <TouchableOpacity key={route.name} onPress={()=>{
          if (!clicked) {
            navigation.navigate(route.name);
          }
        }} 
        style={{flex: 1}}
        accessibilityRole="button"
        accessibilityState={clicked ? { selected: true } : {}}
        delayPressIn={0}
        >
          <View style={styles.sideButton}>
            {route.name==="Account"? <FontAwesome5 name="user-circle" size={window.width*0.09} color={defaultStyles.colors.primary} />:
            <MaterialIcons name="credit-card" size={window.width*0.104} color={defaultStyles.colors.primary} />
            }
          </View>
        </TouchableOpacity>}
        return button;
      })}
    </View>
  )
}

const TabNavigator = (props) => (
    <>
      <Tab.Navigator
        initialRouteName="Home"
        barStyle={{ backgroundColor: defaultStyles.colors.white }}
        activeColor={defaultStyles.colors.white}
        tabBar={(props) => <CustomTabBar {...props}/>}
      >
        <Tab.Screen
          name="Cards"
          component={CardsScreen}
          // options={{
          //   tabBarIcon: ({ color, size }) => (
          //     <MaterialCommunityIcons
          //       name="credit-card-outline"
          //       size={27}
          //       color={color}
          //     />
          //   ),
          // }}
        />
        <Tab.Screen
          name="Home"
          component={HomeNavigator}
          // options={({ navigation }) => ({
          //   tabBarButton: () => (
          //     <HomeButton onPress={() => props.navigation.navigate(routes.HOME)} />
          //   ),
          //   headerShown: false,
          // })}
        />
  
        <Tab.Screen
          name="Account"
          component={AccountNavigator}
          // options={{
          //   tabBarIcon: ({ color, size }) => (
          //     <MaterialCommunityIcons name="account" size={27} color={color} />
          //   ),
          // }}
        />
      </Tab.Navigator>
    </>
  );

  const styles = StyleSheet.create({
    bottomContainer: {
      flexDirection: 'row', 
      alignItems: 'center',
      bottom: window.height*0.05,
      borderRadius: 25,
      backgroundColor: 'white',
      marginHorizontal: window.width*0.07,
      height: window.height*0.069,
      shadowColor: defaultStyles.colors.primary,
      shadowRadius: 15,
      //shadowOffset: {width: 4, height: 4},
      shadowOpacity: 0.3
    },
    homeButton: {
      width: window.width*0.213,
      height: window.width*0.213,
      backgroundColor: defaultStyles.colors.primary,
      alignSelf: 'center',
      borderRadius: window.width*0.213/2,
      alignItems: 'center',
      justifyContent: 'center',

    },
    homeIcon: {
      height: 32,
      width: 37
    },
    sideButton: {
      justifyContent: 'center',
      alignItems: 'center',
    }
  })

  export default TabNavigator;

On my App.js, I am indeed wrapping it:

      <NavigationContainer theme={NavigationTheme.DefaultAppTheme}>
        <OverflowMenuProvider>
          <AuthNavigator />
        </OverflowMenuProvider>
      </NavigationContainer>

I know that’s not the issue because when I replace const Tab = AnimatedTabBarNavigator(); with const Tab = createBottomTabNavigator(); it works just fine. I also tried it using the example provided in the documentation with a really simple navigator and same error.