createTopTabNavigator().Navigator is undefined in react native top tab navigator

Question

I tried to use material-top-tabs from react navigation. I have followed the installation process mentioned in their documentation. But when I try to import createMaterialTopTabNavigator

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MaterialTopTabNavigator.

This is the code I have written. All other imports work fine.

import { StyleSheet, Text, View } from "react-native";
// import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import {
  MostViewedSongsScreen,
  RecentlyPlayedSongsScreen,
} from "./history-screens";
import {
  backgroundColor,
  black60,
  black80,
  matteBlack,
} from "../others/constants";
import TabBarContents from "../components/HistoryScreen/TabBarContents";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
// const Tab = createBottomTabNavigator();
const Tab = createMaterialTopTabNavigator();
export function HistoryScreen() {
  return (
    <Tab.Navigator
      // tabBarOptions={{
      //   // activeTintColor: "white",
      //   // inactiveTintColor: "white",
      //   activeBackgroundColor: backgroundColor,
      //   // inactiveBackgroundColor: "white",
      //   showLabel: false,
      //   style: {
      //     position: "absolute",
      //     bottom: 0,

      //     elevation: 5,
      //     backgroundColor: black80,
      //     height: 60,
      //     textAlign: "center",
      //   },
      // }}
      initialRouteName="most-viewed-songs"
      // tabBar={(props) => <TabBarContents {...props} />}
    >
      <Tab.Screen
        name="most-viewed-songs"
        component={MostViewedSongsScreen}
        // options={{
        //   tabBarIcon: ({ focused }) => {
        //     return (
        //       <View
        //         style={{
        //           alignItems: "center",
        //           justifyContent: "center",
        //           // top: 10,
        //         }}
        //       >
        //         <Icon
        //           name="account-clock-outline"
        //           size={26}
        //           color="white"
        //           style={{ marginBottom: 5 }}
        //         />
        //         <Text
        //           style={{
        //             color: "white",
        //             ...styles.baseTextStyle,
        //           }}
        //         >
        //           Most Viewed
        //         </Text>
        //       </View>
        //     );
        //   },
        // }}
      ></Tab.Screen>
      <Tab.Screen
        name="recently-played-songs"
        component={RecentlyPlayedSongsScreen}
        // options={{
        //   tabBarIcon: ({ focused }) => {
        //     return (
        //       <View
        //         style={{
        //           alignItems: "center",
        //           justifyContent: "center",
        //         }}
        //       >
        //         <Icon
        //           name="history"
        //           size={26}
        //           color="white"
        //           style={{ marginBottom: 5 }}
        //         />
        //         <Text
        //           style={{
        //             color: focused ? backgroundColor : "white",
        //             ...styles.baseTextStyle,
        //           }}
        //         >
        //           Recently Played
        //         </Text>
        //       </View>
        //     );
        //   },
        // }}
      ></Tab.Screen>
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  baseTextStyle: {
    fontSize: 14,
    textTransform: "capitalize",
    letterSpacing: 1.05,
    color: "white",
  },
});```


my package.json dependencies are 
```  "dependencies": {
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-picker/picker": "^1.16.3",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/drawer": "^5.12.5",
    "@react-navigation/material-top-tabs": "^5.3.17",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "axios": "^0.21.1",
    "crypto-js": "^4.1.1",
    "emailjs-com": "^3.2.0",
    "expo": "~42.0.1",
    "expo-av": "~9.2.3",
    "expo-clipboard": "~1.1.0",
    "expo-linear-gradient": "~9.2.0",
    "expo-secure-store": "~10.2.0",
    "expo-status-bar": "~1.0.4",
    "lottie-react-native": "4.0.2",
    "qs": "^6.10.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-animatable": "^1.3.3",
    "react-native-animated-loader": "0.0.9",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-image-colors": "^1.3.1",
    "react-native-palette": "^1.1.0",
    "react-native-paper": "^4.9.2",
    "react-native-phone-input": "^1.0.10",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "12.1.1",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-tab-view": "^2.16.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.13.12",
    "rn-placeholder": "^3.0.3"
  }```