Expo/vector-icons Not Showing In Bottom Tab React Native

Question

I'm currently utilizing React Native Navigation Bottom Tabs to switch between two screens on my app. I'm looking to incorporate a tabBarIcon from Expo/Vector-Icons. I went through the website and found an icon I prefer, but after implementing it into my code, the icon does not show up on the bottom tabs. Instead, the standard default rectangle is displayed, and I'm not receiving any error messages. Could someone please assist me with this issue? Below is my code:

import { StyleSheet } from "react-native";
import AddExpense from "./src/screens/addExpense";
import HomeScreen from "./src/screens/homeScreen";
import EditScreen from "./src/screens/editExpense";
import Overview from "./src/screens/overview";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function Expenses() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="Edit" component={EditScreen} />
      <Stack.Screen name="AddExpense" component={AddExpense} />
    </Stack.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Expenses"
          component={Expenses}
          options={{ headerShown: false }}
          tabBarIcon={() => (
            <MaterialCommunityIcons
              name="piggy-bank-outline"
              size={24}
              color="black"
            />
          )}
        />
        <Tab.Screen name="Overview" component={Overview} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

I tried finding the solution on the internet but I wasn't able to find anyone facing something exactly like me who was using Expo/vector-icons.