I’m following the guide from https://reactnavigation.org/docs/bottom-tab-navigator/

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => 
            <MaterialCommunityIcons name="home" color={color} size={size} />
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) =>
            <MaterialCommunityIcons name="bell" color={color} size={size} />
        }}
      />
      
    </Tab.Navigator>
  );
}

Everything works, except it shows the wrong icon. ‘home’ icon displays sad emoji, and ‘bell’ icon displays sad emoji with sweat.
I tried to change name="" in <MaterialCommunityIcons>icons and it all shows different icons that what the name suggested.
The icon that appears are also coloured, so I suspected that it might not be rendering MaterialCommunityIcons at all.

Could someone suggest what might have gone wrong please?
Thank you